Jump to content
GreenSock

Funktional

scroollSmoothrer & Scrollbar

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Screenshot_3.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×