Update height in dynamic content

[rhernandog]

Hello,

Thanks for this package is really neat!!!

I'd like to know if there is a way to update the height of the scrollbar when the content's height changes. Basically I'm trying to add this to a vertical menu on a sidebar. The issue is that some of the menu elements have submenus, so the content's height changes whenever those are opened and closed.

Here is a live reduced sample of what I'm trying to build:

https://codesandbox.io/s/adoring-hodgkin-4ikzz

Also there is another issue when the elements are expanded and then collapsed, the scrollbar is still visible even though the content's height fits the parent element. To reproduce, expand all elements and then collapse them all.

[rommguy]

Thanks, I'm glad you like it.
I need to check. I think you have to render the CustomScroll component somehow after the menu changes size, for the changes to affect the scroll appearance. Otherwise, there is no way the code that calculates the sizes will run - nothing to trigger it.

[spennythug]

I was running into a similar situation and was able to get around it by calling forceUpdate on a ref. This might not be best practice but it's a decent solution without making any changes to the package.

Here is a pseudo code example.

constructor() {  
  this.scrollRef = React.createRef();
}

render() {
  return <CustomScroll ref={this.scrollRef}></CustomScroll>
}

theHeightHasChanged(){
  this.scrollRef.current.forceUpdate();
}

[rommguy]

I think that's the solution I would go with, or render the customScroll's parent component if you want to avoid the ref usage.

[rhernandog]

@rommguy & @spennythug I had to work on some other aspects of the project so I abandoned this for a while. The solution actually works in some fashion but there are a few glitches regarding the size of the scroll handler not being updated as the height of the content is updated and the position somehow jumping around on the next scroll event, after the content size is updated.

Since this is not some code I'm very familiar with it I crafted my own solution using GSAP (https://greensock.com/), since I'm already using it in the project. Is still a work in progress and because of the project's specs it only works in desktop and laptops (since devices have already a good looking UI when it comes to scrolling there is no need to change it) but it does what we need.

Repo
https://github.com/rhernandog/react-custom-scrollbar

Live Preview in Codesandbox
https://30jdm.csb.app/

Live Sample in Codesandbox
https://codesandbox.io/s/github/rhernandog/react-custom-scrollbar