Scrollbar disappears when adding the renderTrackVertical function

[joetidee]

I have the following functional component:

const CustomScrollbars = ({ children }) => (
    <Scrollbars
        renderTrackVertical={({ style, ...props }) =>
            <div {...props} style={{
                ...style,
            }}/>
        }

        renderThumbVertical={({ style, ...props }) =>
            <div {...props} style={{
                ...style,
                backgroundColor: '#999',
                borderRadius: '5px',
                width: '10px',
                right: 2,
            }}/>
        }
        >
        {children}
    </Scrollbars>
);

Like this, the scrollbar doesn't appear on the page - I cannot see it even using dev tools. If the renderTrackVertical function is removed the scrollbar appears!

[JochenFromm]

Same problem here. Did you find a solution @joetidee ?

[JochenFromm]

I got it working, styles which work for "renderThumbVertical" are

  backgroundColor: '#999',
  width: '10px',
  float: 'right',

styles for "renderTrackVertical" are

  height: '100%',
  top: 0,
  right: 0,

Without height: '100%' it is not visible, see https://github.com/malte-wessel/react-custom-scrollbars/issues/96

[jony89]

Got it working using their style as well

    renderTrackVertical({ style, ...props }) {
        const finalStyle = {
            ...style,
            right: 2,
            bottom: 2,
            top: 2,
            borderRadius: 3,
            backgroundColor: '#eee',
        };
        return <div style={finalStyle} {...props} />;
    }

[paddotk]

@jony89 Although I had to adjust the container height, your solution worked, thanks. It seems that using defaultRenderElements (e.g. renderTrackHorizontal={({ style, ...props }) => renderTrackHorizontalDefault({...props})) instead of setting a div was what killed it for me. It worked ok when just using a renderTrackHorizontal (although it spawned a vertical one instead), but when adding a 'renderTrackVertical' anywhere, there were no scrollbars at all. Seems like a bug that needs fixing.