Scrollbar is not showing when component mounts.

[joetidee]

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.

[KriszKecskes]

+1 I have the same problem :-(

[elhay-av]

same for me. this is regression from 4.1.2 version

[spiral2k]

I have the same problem

i think it's because the element that have the scrollbar change the size after the element has loaded,

in my case its API call to get some content, and when the content is in the DOM the scrollbar have the initial height of the element

[jai1331]

Any solution for this ? Have the same problem. Scrollbar is not showing, While component mounting. When you start start scrolling, the scrollbar appears @malte-wessel It would be better if we fix this.

[rakeshpatel09]

you can solve the issue , by adding below props on Scrollbar component

<Scrollbars renderThumbVertical={props => <div {...props} style={{position: "relative",display: "block",width: "100%",cursor: "pointer",borderRadius: "inherit", backgroundColor: "rgba(0, 0, 0, 0.2)",height: "30px"}} />} />

[lucianobagattin]

Hi guys! How did you finally solved this? Thanks!

[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