react-custom-scrollbars

react-custom-scrollbars copied to clipboard

Hi, I just wanna customize the scroll track and thumb style, for example setting the width of the track and the bgColor of thumb. And I exactly followed the instruction of Customization here and wrote some styles. But when I was scrolling in the container, the track and thumb still looked as its default style. I inspected the elements, finding that the track element was invisible(display: none) and the thumb was not the one I customized style on. I cloned this repo and ran the examples. Seems that the examples also didn't work correctly. Could someone help on this issue? Why the scrolling thumb wasn't the one I customized? Seems it's the default scrollbar of Scrollbars' view.

Obviously the color of the scrolling thumb isn't the customized.

same issue, how to fix this?

Same issue, but only in FF (v71.0)

Same

it can be customised be sure which direction you want , vertical or horizontal,😅 maybe, mistakenly you customize Horizontal bar which is not appear when it does not have scroll, and you focus to only Vertical bar, renderThumbVertical={(...props) => ( <div {...props} className="thumb-vertical" /> )}

Same issue... the scrollbars simply disappear when I try to render each of them individually.

This is still a problem. It appears that the props passed do not include the correct width/height

The renderThumbHorizontal/Vertical methods are being passed props and the style prop just contained basics: position, display, height. So there is no background-color which makes the thumbs transparents.

You have to copy paste the default styles again:

renderThumb({ style, ...props }) {
    return <div {...props} style={{ 
            ...style,
            cursor: 'pointer',
            borderRadius: 'inherit', 
            backgroundColor: 'rgba(0, 0, 0, 0.2)' 
        }}/>;
}