scroollSmoothrer & Scrollbar

[Funktional 1 Likes (Newbie)]

I would like to combine scrollsmother with scrollbar, I mean mainly interesting scrollbar styling (disappearing etc.) which I get thanks to scrollbar, but it doesn't work for me with smoother gsap where I have a lot of elements using data-speed. Can it be combined? 
this is what I have in the code:

 

const smoother = ScrollSmoother.create({
content: content,
wrapper: '#smooth-wrapper',
smooth: 2,
effects: true,
});

let bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document });

See the Pen abNGeKZ by mikeK (@mikeK) on CodePen

[Rodrigo 5,072 Likes (Superhero)]

Hi @Funktional and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 🥳

 

Honestly I don't think ScrollSmoother is compatible with third party scroll bar plugins/libraries, since ScrollSmoother works with the natural browser's scroll. The custom library you are using somehow leverages a similar approach (in the fact that wraps everything in a container, moves that up and down but also creates the custom scroll bar), although the differences could be big between them, honestly I've never used it so I couldn't tell.

 

I'll ping @GreenSock so He can clarify this and give a more definitive answer on the subject.

 

Please stand by.

 

Happy Tweening!

[GreenSock 18,249 Likes (Superhero)]

Yeah, we can't really support 3rd party libraries like that here. It looks like that particular one messes with things quite a bit, including the DOM wrapper, etc. It's probably doable to somehow get it working, but I doubt it'd be simple. 

 

Maybe just use CSS to style the native scrollbar. I've never really tried, but perhaps this article would help: 

https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/

[Funktional 1 Likes (Newbie)]

Okay, thanks for the explanation. Will try to do it another way

[The Old Designer 26 Likes (Newbie)]

You can do a fair bit to the scrollbar with CSS as well https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/

 

Whoops sorry just noticed someone beat me to it..

Edited November 22, 2022 by The Old Designer
stupidity

[Funktional 1 Likes (Newbie)]

I was more interested in making a scrolllbar that has a locomotive scroll. It's not about simple styling, but about its smoothness and fading when inactive. Gsap smoothscroll probably doesn't have it or I haven't encountered such an example as in the link below

 

See the Pen WNwjEaL by ebinabo (@ebinabo) on CodePen

[Cassie 5,121 Likes (Superhero)]

Hiya, I'm a little confused now because that just looks like the native browser scrollbar as far as I can see - (chrome, macbook)

Looks just like this one to me

See the Pen PoEJvjE by cmalven (@cmalven) on CodePen

Does the scrollbar behave differently using a mouse with a stepped wheel? I've got a magic mouse and a touchpad so everything's pretty smooth anyway. Is that what you're trying to handle?

[Funktional 1 Likes (Newbie)]

It just doesn't look the same as you can see in the example you pasted, although the fact that it looks ok on a macbook, in general, locomotive operation is completely different and a custom scrollbar is built there. Which probably can't be done on gsap smooth-scroll.