Question About Multiple Scrollbars

[bryantAXS]

I'm trying to achieve an interaction similar to what they are doing here: https://www.surfacemag.com/

In short, scroll an internal list of content first, then when it gets to the bottom, scroll the full body content. I assuming this is what the delegateTo option is for, but that doesn't seem to be doing the trick.

I figured when the page loads and we want any scroll to target the internal list, set the delegateTo option on the body content to the internal list container. Is that right?

If not, can you point me in the right direction?

Thanks for your great lib!

Environment

• Browser: Chrome
• Version of smooth-scrollbar: 8.4

[idiotWu]

It can be easily achieved by setting continuousScrolling to true on the inner scrollbar :).

[bryantAXS]

That gets me part of the way there, but on page load, I want scrolling on the outer scrollbar's events to scroll the interior scrollbar until the bottom is reached. Then, continue scroll the page per normal.

[toxifiedmatrix]

It can be easily achieved by setting continuousScrolling to true on the inner scrollbar :).

I want to install this on an HTML5 and JQuery website, how can I do that, I already have smooth-scrollbar.js, whats next? Please guide me anyone?
Why no one cares to reply?

[bryantAXS]

@idiotWu maybe the problem is I'm not understanding the delegateTo option.

I thought delegateTo would allow me to setup a scroll bar, and then "delegate" the scrolling events fired on that container to a different scrollbar entirely.

But it seems like instead of delegating events on scroll bar A to scroll bar B, it instead tells scrollbar A to listen to scroll events on a different element and then scroll itself. Is that correct?

In my case I have a two scrollbars setup. The first is a parent scrollbar that wraps all the content on the page. The second is child section, which lives inside the parent. Ideally, when the child finishes scroll the parent scrollbar would then start scrolling. I've tried various continuousScroll configurations on both the child and the parent and can't get it to work.

When I don't init the parent scroll bar, and just use native scrolling, it works as intended. But when I init both the parent scrollbar and the child, and set continuousScroll on the child, the parent just stays locked after the child scroll bar gets to the bottom.