Scrollbars not appearing/disappearing when internal elements height changes

[justinasci]

Scrollbars not appearing/disappearing when internal elements height changes.

Bug is reproducible on Chrome, Edge, Opera, but works as intended on Firefox.

Repro project: https://codesandbox.io/s/react-hooks-usestate-forked-utzu8n?file=/src/index.js

1. Increase height with "+" button until content no longer fits into scroll view
2. Notice scrollbar not appearing
3. Try scrolling down with mouse wheel/track pad for scrollbars to appear.
4. Decease height with "-" button until content content fits into scroll view
5. Notice scrollbar not disappearing

[bkistyping]

Did you ever find a solution for this?

[justinasci]

@bkistyping This lib doesn't, track size changes of its child container. One of the solutions is to do it ourselves.
I modified the original repro project to do just that https://codesandbox.io/p/sandbox/stupefied-bird-m77fgv

First of all we wrap scrollbars children in div and track its size changes with resize observer and couple of refs (there is a hidden scrollbars ref property if you are using TS). Later, we call scrollbars to update itself on each change.

Of course preferred solution would be fixing in the lib...