Scrollbar is not showing when component mounts.

I have the following scrollbar component:

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

When the page loads the scrollbar does not appear. When I position the mouse pointer over the content and use the mousewheel to start scrolling, the scrollbar appears.

Having inspected the element using dev tools, the scrollbar is on the page, but the height of the thumb area is initially 0px.

[uadarsh]

It seems like the Scrollbar component should call update whenever the scrollbar thumb is likely to change. This is not happening. I did this by creating a ref and calling update on that - a bit hackish, but works until it is fixed internally.

     // In render method
      <Scrollbars
        ref={this.scrollbarRef}
      >
        <div ref={this.childRef}>{this.props.children}</div>
      </Scrollbars>

Then call this.scrollbarRef.current.update() whenever the scrollbar is expected to change. For me it was on child component resizes. So, I did the following -

  componentDidMount() {
    this.observer = new ResizeObserver(this.update).observe(
      this.childRef.current
    );
  }
  componentWillUnmount() {
    this.observer && this.observer.disconnect();
  }

[atomoc]

@uadarsh

  componentDidMount() {
    this.observer = new ResizeObserver(this.update);

    this.observer.observe(
      this.childRef.current
    );
  }

Small amendment