Open joetidee opened 6 years ago
+1 I have the same problem :-(
same for me. this is regression from 4.1.2 version
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
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.
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"}} />} />
Hi guys! How did you finally solved this? Thanks!
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();
}
@uadarsh
componentDidMount() {
this.observer = new ResizeObserver(this.update);
this.observer.observe(
this.childRef.current
);
}
Small amendment
I have the following scrollbar component:
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 initially0px
.