ScrollTrigger not working with overflow: scroll?

[sytx.99]

Hi, I have a container div set to 100vw x 100vh, position fixed with overflow scroll, however the trigger stops moving after setting "#path-container" to overflow:scroll. Why does this happen and what should I do to fix this?

 

(I need the container div to be 100vh because I want to "squeeze" only what's visible)

 

Thanks in advance, much appreciated!

 

See the Pen xxEzjjN by cocotx (@cocotx) on CodePen

[ZachSaucier]

Hey sytx.99. Since you are no longer using the default scroller of the page, you need to tell your ScrollTriggers which scroller they should use by using the scroller property. You can read more about it in the docs. 

 

With that being said, I don't really have a great understanding of what you're trying to accomplish. Like why do you have xPercent: 102? Also there are multiple scrollbars showing up for me on Windows - I'd try to fix that. You might also be interested in using GSAP's defaults functionality.

[sytx.99]

1 hour ago, ZachSaucier said:

Hey sytx.99. Since you are no longer using the default scroller of the page, you need to tell your ScrollTriggers which scroller they should use by using the scroller property. You can read more about it in the docs. 

Hi Zach, it makes so much sense now, I was able to solve my problem by adding scroller: "#path-container", thank you!

 

and sorry for the confusion in my demo, I'll look into fixing that!