tniou Posted June 20 Share Posted June 20 Hi people, I've used horizontal scroll with GSAP successfully a few times before, and now I want the horizontal scroll to happen in a container, where the body element has position fixed (the horizontal scroll should happen inside the child container or so). So far I haven't come up with any solution to it though, is it possible at all? See the Pen mdYxejR by tantoniou (@tantoniou) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted June 20 Share Posted June 20 Hi @tniou and welcome to the GSAP Forums! There are many ways to achieve that, you can check our ScrollTrigger demos collection: https://codepen.io/collection/AEbkkJ Here you can see a couple of demos: See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen See the Pen xxEQNBB by GreenSock (@GreenSock) on CodePen Also this is related to the CSS styles and HTML layout you have in place, a different approach would be needed in order to make this work, for example something like this: See the Pen MWzeJow by GreenSock (@GreenSock) on CodePen Hopefully this help Happy Tweening! Link to comment Share on other sites More sharing options...
tniou Posted June 21 Author Share Posted June 21 Thanks for your response Rodrigo The above pens do not work in my case, which is as simple as my pen, a single horizontally scrolling container inside a fixed body to prevent the browser from switching the address bar in mobile/tablet devices. If I make the body (not the container of the horizontal scroll) fixed, then the browser has no height to scroll on, and I can't make it to scroll inside a wrapper/container element Link to comment Share on other sites More sharing options...
Rodrigo Posted June 21 Share Posted June 21 Ah OK, I se what's the idea now. Just use Scrolltrigger normalizeScroll method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() That would do what you want without adding funky styles to the body tag. You might want to use it in combination with the isTouch property in order to use it only on devices https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch Hopefully this helps Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now