Normal update isn't fired when vertical scrollbar height changes

[AyoubOue]

Describe the bug The title describes it all, for styling purposes I dynamically change the vertical scrollbar height, the problem is, unlike what is mentioned in your website "Usually (99.9%) a normal update should be enough, but ideally you will call this method only to reset the sleep behavior and never to update it manually." the normal update wasn't enough to keep the handle synchronized with its track and bar, so I was forced to use manual update as callback function for the onScroll option, which does the work, but, as you've mentionned it isn't "ideal" because the scrolling isn't smooth at all and so laggy which is understandably due to the complete restart that does the manual update several times in succession.

To Reproduce Steps to reproduce the behavior:

1. Write any javascript code within the callback function of the onScroll option that dynamically resizes the "div.os-scrollbar.os-scrollbar-vertical" and "div.os-scrollbar.os-scrollbar-vertical > div.os-scrollbar-track" heights proportionately.
2. You can obviously see that the handle isn't synchronized.
3. Now put instance.update( true ) inside the callback function of the onScroll option.
4. Finally the handle fits fine in its track, but the scrolling isn't smooth anymore.

Expected behavior update the scrollbar handle accordingly to the scrollbar height while keeping the scrolling smoothness.

Examples https://jsfiddle.net/b4o0r72q/

The "jsfiddle" example seems to work great and smoothly, but it's not the case for my local website (I can't share the link because it's still local), I guess because there isn't so much script in that jsfiddle page unlike my website's...

Environment

• Only tested on Windows 11:
• On Mozzila the lag is a little bit bearable.
• On Chrome and Edge it's unbearably laggy.

Additional context Any fixes or workarounds will be appreciated.

Update!! Mozzila works a bit fine compared to Chrom and Edgr, sometimes with no lag at all, the real struggle is with the other browsers, still didn't test it with Opera and Safari

[KingSora]

Good day @AyoubOue

The update function was implemented to primarily to update the state of the wrapper elements like viewport and padding and isn't really there to only update the scrollbars in isolation because they should only change if one of the wrappers change.

What you are doing in your code seems kinda stragne, do you wanna share a bit more information of what you are trying to achieve? Manually setting the height depending on the scroll position is not something I would plan to support.

[KingSora]

If you are able to switch to v2 I believe this should work there: https://jsfiddle.net/bs8am57f/1/ I would still recommend not to adapt the height property of the scrollbars. If you absolutely have to, adapt the max-height property instead.

[AyoubOue]

Thank you so much for your reply @KingSora

As shown in the example, I want the scrollbar to stop before the footer and not overlap it, without actually stop scrolling... achieving that is why I dynamically change its height (I couldn't think of any other possible way to achieve it) (yeah you're right I should've use max-height instead, I changed it now but you know the main problem is with the handle update). The problem is that the handle keeps space between it and the bottom of the scrollbar cuz it doesn't automatically update to the scrollbar height change, updating manually works but it's very laggy.

How can this https://jsfiddle.net/bs8am57f/1/ be better and not laging? How can I get the v2 to test it out?

[KingSora]

If you are using any package manager like npm or yarn, use 2.0.0-beta.3 as the version. If you are downloading it manually you can use https://www.jsdelivr.com to find the latest versions

[AyoubOue]

Hi @KingSora

Sorry for replying late, I had some personal problems, and sorry for taking that much from your time as well,

I have downloaded the v2 beta but the scrollbar doesn't seem to work at all, I tested in a simple html file with the code below :

<head>

<link rel="stylesheet" href="overlayscrollbars-2.0.0-beta.3/package/styles/overlayscrollbars.min.css">

<script src="overlayscrollbars-2.0.0-beta.3/package/dist/browser/overlayscrollbars.browser.es5.js"></script>

<style> #footer { height: 175px; background: cyan; position: relative; } </style>

</head>

<body>

<div>SOME LONG TEXT</div> <div id = "footer"></div>

<script> var OverlayScrollbars = OverlayScrollbarsGlobal.OverlayScrollbars; var instance = OverlayScrollbars(document.querySelector("body"), {}); </script>

</body>

Only the initialization, but same problem, the scrollbar shows but is stuck to the top, the page scrolls but the bar doesn't move.

So I didn't have the chance to test if your suggestion will work for my initial problem, instead I got another problem.

[KingSora]

@AyoubOue please also create an example on jsfiddle for that.. I'll take a look as soon as I have time

[KingSora]

v2 released today, please update your overlayscrollbars dependencies to the latest version I'll close this issue for now as for me everything seems to be working.. in case you still have the issue described in your last post, please open a separate issue.