huntabyte / bits-ui

The headless components for Svelte.
https://bits-ui.com
MIT License
953 stars 70 forks source link

Scrollbar Thumb Fails to Recalculate Correct Size and Position After Resize #567

Open hranum opened 4 weeks ago

hranum commented 4 weeks ago

Describe the bug

In an example with vertical scrolling, when the ScrollArea is placed inside a div with "h-full", it stretches correctly and works fine, except for the thumb. The thumb does not resize to match the new constraints, and its position calculation remains as it was before the resize. Even when manually adjusting the element's style using some observers during resize, the ScrollArea still resets the thumb to the incorrect height and position.

Starting height: image

After resizing the parent, the scrollbar adjusts correctly and fills the available height. However, the thumb should appear at the bottom in the last image. Currently, it stops halfway down, and its height should be almost 100%. image

Reproduction

https://stackblitz.com/edit/github-61yp85?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

"bits-ui": "0.21.7",
    "svelte": "4.2.16",

Severity

annoyance