OeverlayScrollbar dynamically changed transfrom is not visible in DOM element

[mukhammad-akilov]

Describe the bug
OeverlayScrollbar dynamicallychanged transfrom is not visible in DOM changes. For exmaple if I make scroll or auto scroll then div.os-scrollbar-handle shuould take styles with transform but I can't see these styles in Google Chrome

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://kingsora.github.io/OverlayScrollbars/example/overlayscrollbars/ with Chrome browser (or based or browser based on Chrome engine)
2. Open DevTools
3. Scroll down little beet
4. Investiage div.os-scrollbar-handle DOM element and see error

Expected behavior
In Firefox browser transform property is visible:

Examples
For exmaple you can use this default demo:
https://kingsora.github.io/OverlayScrollbars/example/overlayscrollbars/

Environment

• Used Operating System(s): Windows 11 (Version 10.0.22621 Build 22621)
• Used Browser(s) (with version): Google Chrome 116.0.5845.182

The reason I need this property beacuse I created two custom scrollbars and the first one is scrolled automatically that is why I am observing the changes from another scroll container using MutationObserver API and apply transform style to the first one.

[KingSora]

Good day @mukhammad-akilov :)

This change was introduced in version 2.3.0. Supported browsers (such as chrome) use the scrolltimeline api to move the scrollbar handles. Eventually this will be the way how the scrollbar handles will move in every browser because it improves the performance signifficantly.

Since the value you need is calculated from other values you shouldn't need a MutationObserver at all. Can you post an example of what you exactly wanna create? I would look into it and make an version which works without the MutationObserver.

[mukhammad-akilov]

Thank for you reply :)
It was my mistake, I make the repo public now

[KingSora]

@mukhammad-akilov I've made a working solution for you, with the correct calculations for the scrollbar handle: https://stackblitz.com/edit/vitejs-vite-r4pc6h?file=src%2Findex.ts

I hope that this is helpful for you and kinda what you searched for

[mukhammad-akilov]

Thanks for you example! I checked it in Firefox and Chrome. In Firefox it is being scrolled, but in Chrome:
Chrome:

Also I have several questions:
1)In Firefox scrollbar is not scrolled till the end. How can I fix it?

2)How can I decrease and increase the speed of scrollbar scroll?
For example if I want to increase speed of smooth scroll, I just add more pixels:

But how to sync this speed with custom scrollbar?

Sorry for interupting you and taking your time :(

[KingSora]

@mukhammad-akilov I've created a improved example here which hopefully should solve the chrome issue and the "scroll till the end" issue: https://stackblitz.com/edit/vitejs-vite-xiuxru?file=src%252Findex.ts (increased the speed to 100) I've also synced the transition and interval speed to 250ms. (you can customize this as you want, just keep them in sync to have the best possible experience)

Regarding syncing the speed, what do you exactly mean? You would just need to increase the number

[mukhammad-akilov]

Thank you very much! You saved my time :) For now everything works fine. I will learn deeper your example. By syncing the speed I ment about scrolling content and moving scrollbar, but for now everything works fine. Thanks a lot!

[KingSora]

Youre welcome :)

Please click the "Mark as anwer" button on my reply which helped you the post to mark the discussion as resolved