react-custom-scrollbars: Styling the thumb not working

Using v4.0.0; React v15.1.0; Redux v3.5.2 So I’ve been trying to add my own styling to the thumb and track but I can’t seem to get it to work. I figured out that you need to add the complete styling (I did see this is fixed in 4.0.1) but when I try to set a different color to the thumb it doesn’t style the actual thumb but just places a ‘new’ static thumb in that color and the actual thumb that is moving isn’t colored, what am I doing wrong?

Also the autoHide={false} doesn’t work and it still hides when I’m not scrolling.

< Scrollbars
  autoHide={false}
  autoHeight={true}
  autoHeightMin={this.scrollBarHeight()}
  autoHeightMax={this.scrollBarHeight()}
  renderThumbVertical={props => < div {...props} className="thumb-vertical"/>}
  renderTrackVertical={props => < div {...props} className="track-vertical"/>}>
       // content
< /Scrollbars >

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

.track-vertical {
  position: absolute;
  width: 6px;
  display: block!important;
  right: 2px;
  bottom: 2px;
  top: 2px;
  border-radius: 3px;
}

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 7
Comments: 16 (1 by maintainers)

Most upvoted comments

@mruano29 that might be a work around but you can’t really ask people to do that when using your app :p

+10

e11en on Nov 17, 2016

I had the same issue using OSX, configure “use the scrollbars: always” on system preferences => general. It worked for me.

mruano29 on Nov 16, 2016

Ok, your style has to include height: 100%; top: 0; right: 0;

hackhat on Jul 6, 2017

@hackhat I owe you a beer. Here’s how the renderTrack method should look like:

  renderTrack = ({ style, ...props }) => {
    const { trackColor } = this.props;

    return (
      <div
        style={{
          ...style,
          backgroundColor: trackColor,
          height: '100%',
          top: 0,
          right: 0,
        }}
        {...props}
      />
    );
  }

danmo on Jul 27, 2017