Jump to content
Search Community

Body fixed with horizontal scroll, is it possible?

tniou test
Moderator Tag

Recommended Posts

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

Hi @tniou and welcome to the GSAP Forums!


There are many ways to achieve that, you can check our ScrollTrigger demos collection:



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

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

Ah OK, I se what's the idea now.


Just use Scrolltrigger normalizeScroll method:




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 




Hopefully this helps 

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.
  • Create New...