Scroll trigger issue when html overflow:hidden

[TCO 0 Likes (Newbie)]

Hello, 

 

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?

Thanks!

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

[mvaneijgen 1,543 Likes (Superhero)]

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. 

[TCO 0 Likes (Newbie)]

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.

[Rodrigo 5,068 Likes (Superhero)]

Hi,

 

You can use ScrollTrigger's normalize scroll method in order to prevent that:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Hopefully this clarifies the issue. Let us know if you have more questions.

 

Happy Tweening!

[TCO 0 Likes (Newbie)]

@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...

[Rodrigo 5,068 Likes (Superhero)]

Hi,

 

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

ScrollTrigger.normalizeScroll(true); 

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

 

Happy Tweening!