React-custom-scrollbars: Styling the thumb not working

[e11en]

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

[artsx]

Hello, you found a solution? I have the same worries, after the custom scrollbar, it remains frozen up and not moving ...

[e11en]

No unfortunately not yet. I've asked this question on stackoverflow (link) as well in the hope somebody there knows the answer, but no response yet.

[malte-wessel]

Actually this should work. Could you post an online example of the bug?

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

.thumb-vertical {
  background-color: #d9534f;
}

[artsx]

Arg no, I only locally for me.. Does that made the parent div either display flex interfere?
I've customized the scrollbar as the screenshot @e11en but not possible to raise / lower it visually freezes up

I've copy paste you're code and I've a same issue.

[mruano29]

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

[e11en]

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

[vancityhuddy]

This issue still persists... renderTrack* does not take initial styling attributes properly.

renderThumb* does

[MateusDantas]

I'm also having the same issue. Anyone got a solution?

[tlerias]

+1

[Afelua]

I had this issue too. How I can decided it?

[hackhat]

same here renderTrackVertical only gets the following style position: absolute; width:6

[hackhat]

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

[danmo]

@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}
      />
    );
  }

[patrykcieszkowski]

@danmo are you sure this is working? You're basically overriding the styling with it's default settings. Move {...props} above the styling props.

[CainCobain]

@e11en still no luck? and is that an issue only on OSX or also other operation systems ? thx

[e11en]

I'm not using react-custom-scrollbars at the moment, so you can close this issue or leave it open for others.