Scrollbar not showing on load when dynamic width

[janejanejane]

The requirement is to have a dynamic width size for a scrollable area. But scrollbar-container div only shows when scrollarea-content is dragged. How can we enforce the scrollbar div to be shown on page load?

[ChristianIO]

I implemented a workaround for a similar issue, perhaps it works in your case, too:

componentDidMount(){
  if(this.scrollAreaComponent){
    setTimeout(this.scrollAreaComponent.scrollArea.refresh, 100);
  }
}

render(){
...
<ScrollArea ref={(component) => {this.scrollAreaComponent = component}} ... >
  ...
</ScrollArea>
...
}

[janejanejane]

@ChristianIO yes, this works. I thought of doing it like this but it seems to be a hack. Do you understand why the dynamic width prevents the scrollbar from showing? I can't understand the lifecycle.

[ChristianIO]

@janejanejane In my case, pictures have not been loaded fast enough and the scrollbar could not render with the correct height. I rechecked my code due to your question and found a bug, that is now corrected in the example code above. Because component can be null (react calls the ref callback with null to release memory space), we have to check against it.

Actually I implemented another workaround today for my issue: Because I know the height of the pictures, I set this height of the img tag via css styles. Now the scrollbar is able to compute the correct overall height, even when the pictures have not been loaded yet.

[janejanejane]

I am unable to do the same as what you did. When I put a width limit in the css, say 915px, then not put a computation for the real width, the contents are not fully shown (of course). If I then put the computation with the css width, the horizontal scrollbar is still not displaying on first load. I know something is wrong but I can't figure it out for now.