Scrollbar will not work if Mac OS show scrollbars is not set to Always -- also workaround for mobile scrollbars

``

** custom component ** 

 import React, { Component } from 'react'
import { Scrollbars } from 'react-custom-scrollbars'
import '../css/components/custom-scrollbar.css'

export default class CustomScrollbars extends Component {
  render () {
    console.log(this.props)
    return (
      <Scrollbars
        renderTrackVertical={props => <div {...props} className='track-vertical' />}
        renderThumbVertical={props => <div {...props} className='thumb-vertical' />}
        {...this.props}
      >
        {this.props.children}
      </Scrollbars>
    )
  }
}

** CSS **
.track-vertical {
  position: absolute;
  width: 6px;
  right: 2px;
  bottom: 2px;
  top: 2px;
  border-radius: 3px;
  border: solid 1px #857364;
}

.thumb-vertical {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: inherit;
  background-color: #857364;
}

** implementation of component ** 
<CustomScrollbars
              autoHeight
              autoHeightMin={100}
              autoHeightMax={200}
              hideTracksWhenNotNeeded
            >
              {this.createAccContent(data.articles)}
            </CustomScrollbars>

I swear i had this working last night before i restarted my computer… Anyway for the life of me i can’t get it to show on screen. When i inspect for the elements they are there but track-vertical is always set to display: none ( even if i remove the hideTracksWhenNotNeeded) and when i click display: none off in the chrom inspector it shows up but the thumb does not track and i see the native scroll instead.

I’ve been staring at this for several hours now and i would appreciate any thoughts. Like i said i had it working yesterday and don’t know why it stopped… #

[Mikeks81]

if you put this in your css you will have a custom scrollbar no matter the MacOS setting AND it will work in mobile browsers

::-webkit-scrollbar {
    min-width: 1px;
    min-height: 1px;
}

[Mikeks81]

ughghhhh so i don’t even know what was wrong with my implementation but i tried some other approaches and got similar results. I went and did a cmd + z to get it all back to how i had it here… and the shit started working… don’t know why but happy it’s working again.