Body fixed with horizontal scroll, is it possible?

[tniou]

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.

[Rodrigo]

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!

[tniou]

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

[Rodrigo]

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!