Jump to content
Search Community

Disable/Enable browser scrolling with ScrollTrigger

ektorp test
Moderator Tag

Recommended Posts

Hi Team Greensock - I have a basic page with various content sections. As each section reaches the 50% mark, it snaps to the top. This seems fairly straight-forward. The issue is that after the snap to top animation completes, it’s drifts off a bit and doesn’t completely stop when it should. To resolve this, on animation complete, I disable the page scrolling via CSS (overflow-y: hidden), to stop the page drift. And then a half a second later, I re-enable the page scrolling. This seems to give me the results I want…but I am now finding that this only works on MacOS. Because on Windows, when you disable page scrolling, it literally removes the visible browser scrollbar. So with my current set up, as you scroll the page, and as the animation completes, the scrollbar hides and then re-appears causing a jerky page shift which is clearly undesirable on Windows. If you comment out line 11 for disableScroll() you will the issue with the page drifting that requires this set up.

 

I just need an acceptable cross browser way to quickly disable and then enable the browser’s page scrolling that works and looks smoothly. Is this something that ScrollTrigger can support? Or is there another ScrollTrigger way of handling this situation?

 

As always, any help would be greatly appreciated.

See the Pen poOZgyX??editors=1010 by bdang (@bdang) on CodePen

Link to comment
Share on other sites

  • ektorp changed the title to Disable/Enable browser scrolling with ScrollTrigger

Hi @ektorp why not use the snap property of ScrollTrigger it self? See the ScrollTrigger docs this is just the simple snap true, but there are loads of settings you could change, you also want to set the trigger to be the top of the viewport + the height of your "page header". Hope it helps and happy tweening! 

 

See the Pen jOvpGbW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
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...