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

[Mikeks81]

``

** 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]

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.

[pnkorn]

the same behavior :(

[Mikeks81]

So I haven't tried this on a windows machine yet but i set the mac OS general settings for 'show scrollbars' to 'always' and now it shows. I didn't see in the documentation where it said that it depends on the mac OS settings for it to work. If it were implied somewhere i missed it 😞

[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;
}

[malte-wessel]

This is intended. See #53 #21 #73

[cdtinney]

@Mikeks81 MDN recommends against using this in production as it's a non-standard feature:

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

[Mikeks81]

@cdtinney Good point. In the end i think i rolled with a different library to support my requirements which is a shame cause i was really digging this library.

[cdtinney]

@Mikeks81 which library?

Our solution was simply to revert to system scrollbars in this edge case via checking scrollbar width and hiding thumbs/tracks via CSS. Our customers will not be switching devices or changing settings so they will have a consistent look and feel.

[Mikeks81]

I ended up using https://www.npmjs.com/package/react-custom-scroll since it
doesn't rely on styling the native scrollbars but creates their own.

On Tue, Oct 23, 2018 at 2:52 PM Colin Tinney [e-mail]
wrote:

@Mikeks81 https://github.com/Mikeks81 which library?

Our solution was simply to revert to system scrollbars in this edge case
via checking scrollbar width and hiding thumbs/tracks via CSS. Our
customers will not be switching devices or changing settings so they will
have a consistent look and feel.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/malte-wessel/react-custom-scrollbars/issues/127#issuecomment-432373896,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOgAk-LFwCSq0cttlUMoMPJQvEoavBI_ks5un2VVgaJpZM4MEqNr
.

--
-Mike
webDev - www.michaelsimonitsch.tech http://michaelsimonitsch.tech/
Photography - www.MichaelSimonitsch.com

[bpGusar]

the error is still present