Jump to content
Search Community

scrollTo - Incorrect behavior of the smooth scroll.

mrWilson test
Moderator Tag

Recommended Posts

Hi,

 

I'm trying to get smooth scrolling to work properly, but unfortunately I can't handle it myself (sorry, I'm pretty new of this). I'm using a scrollToPlugin and external plugin called "Smooth Scrollbar". If you look at it you will see that it is not working properly. Clicking on the link will move it chaotically. Also, if you click on the link multiple times, the page will move up and down, though it shouldn't. Hopefully someone can help me with this.

 

Thank you.

See the Pen poJraMM by Siilionu (@Siilionu) on CodePen

Link to comment
Share on other sites

Hi @mrWilson and welcome to the GreenSock forums.

 

Unfortunatly I believe the issue is more relative to the Smooth Scroll library and not specific to GSAP.

https://github.com/idiotWu/smooth-scrollbar/issues?q=scrollto

 

You can see that fact mentioned by its developer here:

https://github.com/idiotWu/smooth-scrollbar/issues/128#issuecomment-350692283

 

In that above discussion you will find some suggestions that might help, or you would need to write your own logic to try an overcome it.

 

You can also check out the API for that library, which may have something helpful.

https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md

 

At least thats my observation, someone else may say otherwise ¯\_(ツ)_/¯. 

 

  • Like 5
Link to comment
Share on other sites

Trying to pair smooth scroll with other scroll animation is difficult because both try to control the scroll position. Likely the easiest way to keep both working is to disable the smooth scroll functionality while the scroll position is being animated. Then enable the smooth scroll functionality after the animation is complete, making sure that it's functioning correctly with the new position. 

 

Alternatively you could do both the smooth scroll and scrolling to position using GSAP by way of a proxy. Big picture is you'd have a variable to keep track of the scroll position and update that variable when the user scrolls or a button is clicked. And when it updates, you also update the scroll position of the page.

  • Like 1
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.
×
×
  • Create New...