Wrong handle position with reversed scroll

[mc-petry]

Describe the bug I have implemented a chat interface where messages flow from bottom to top, with the scroll bar anchored to the bottom. To achieve this, I used a native CSS solution, applying flex-direction in reverse to the container. However, I encountered an issue where the scrollbar handle incorrectly jumps to the bottom when scrolling to the top of the chat.

[data-overlayscrollbars-contents] {
  display: flex;
  flex-direction: column-reverse;
}

Seems everything works well except scroll handle at top position.

To Reproduce Steps to reproduce the behavior:

1. Go to StackBlitz
2. Scroll to top
3. See error: scroll handle jumped to the bottom

Expected behavior The scrollbar handle should remain at the top when the user scrolls to the top.

Examples StackBlitz

Environment

• Used Operating System(s): MacOS 14.3.1
• Used Browser(s) (with version): Chrome 123.0.6312.107 (Official Build) (arm64)

[KingSora]

Good day @mc-petry :)

OverlayScrollbars doesn't track the flow direction and makes its calculations always based on the default flow direction. (except for direction: rtl)

Please wrap your content with an additional div and apply the styles there: https://stackblitz.com/edit/vitejs-vite-l5egrt?file=src%2FApp.tsx

[mc-petry]

Thank @KingSora for your quick reply. I updated example. Try to click "add message". As you can see, at the first approach, the scroll sticked to the bottom. In second one with inner container - no.

[KingSora]

I see... Well, I have to think about how to fix this issue, because the browser currently doesn't expose any hints about what the min. and max. scroll position in one direction can be. It can be calculated in the range 0..+x but having a reverse flow (column or row) or a direction: rtl will change that range to 0..-x which I can't detect except when I track those properties manually

Sorry, but I can't provide a good workaround for the time being..

For Chrome I could fix this behavior but for other browsers I'm currently not sure how to do it.

[KingSora]

The more I've worked on a "fix" for this problem the more I realized that it is a whole new feature. I've just released v2.8.0 which includes this feature. I've updated the version of your example to v2.8.0: https://stackblitz.com/edit/vitejs-vite-75rxhi

[mc-petry]

The more I've worked on a "fix" for this problem the more I realized that it is a whole new feature. I've just released v2.8.0 which includes this feature. I've updated the version of your example to v2.8.0: stackblitz.com/edit/vitejs-vite-75rxhi

Thanks a lot, works like a charm!