Jump to content


Scroll trigger issue when html overflow:hidden

Go to solution Solved by mvaneijgen,

Recommended Posts



As you can see on the codepen, if you scroll after the markers, nothing is happening and you need to scroll again to see the animation.

It's because the HTML markup have an "overflow: hidden" so do you know if I need to use some parameters on my ScrollTrigger call?


See the Pen jOKYJmB by thibautcollin-be (@thibautcollin-be) on CodePen

Link to comment
Share on other sites

  • Solution

If you want to overwrite the default scroll behavior of the browser you'll need to have a clear goal with it and know what you're doing. If you do not have this or you are new to coding I would not recommend doing this.


ScrollTrigger taps in the to default scroll behavior. If you have some other element you want to use as the scroll container you can define a scroller (see the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger)



String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.


If you instead just want to watch for the scroll event you can also use the Observer plugin https://greensock.com/docs/v3/Plugins/Observer


Instead of showing the issue you're having can you maybe explain what your goal is? If we know what it is you want to do it will be easier to help you with an appropriate solution. 

Link to comment
Share on other sites

Thanks for your answer.


What I'm trying to do is to force the address bar to remain fixed with its original height on mobile devices and not change dimension when we start to scroll in the page.

Link to comment
Share on other sites

@mvaneijgen thanks, it's seems to work when I add an other scroller!


@Rodrigo sounds like a blast but I can't manage to use it, it doesn't seems to work on IOS for exemple...

Link to comment
Share on other sites



Just add this at the top of your document, before creating ScrollTrigger instances:


If you keep having issues, please include a minimal demo so we can take a better look at what it could be.


Happy Tweening!

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.