Jump to content
Search Community

GSAP ScrollSmoother on inner div with horizontal overflow-x: scroll

Something Strange test
Moderator Tag

Recommended Posts

Hi all,


I see a ton of demos about pinning a horizontal section to allow you to scroll vertically through a horizontal section, but is there any way to skip the pinning part, and going way back to the basics - just add a smooth scroll to an inner div with overflow-x: scroll?


I'd like to just scroll normally / native up and down the page, but when you're over the blue section, allow you to smoothly scroll left to right. Again, I'm not trying to pin or allow you to scroll up and down to go through this section.



See the Pen Jjwyomr by something-strange (@something-strange) on CodePen

Link to comment
Share on other sites

Are you saying you only want to apply ScrollSmoother to a nested <div> that scrolls horizontally? If so, no, ScrollSmoother is made for vertically scrolling the entire page. Sorry. There are a whole bunch of complexities and magic is has to apply to do that properly. It can't be done in the same way for a nested <div>. 


Technically you could probably sense wheel/touch events (maybe with Observer plugin or just vanilla), prevent the default behavior in the event (event.preventDefault()) and tween the scrollLeft value. Not exactly simple, but probably feasible with some elbow grease :)

  • Like 1
Link to comment
Share on other sites

Hey @GreenSock,


Correct, you made sense of my words, hah!


I will check out the Observer plugin (never used this one yet). I like the idea of tweening the scrollLeft value...


If you happen to think of any demos that does something similar to this idea, please shoot over a link. And if I come up with some solution, I'll post a follow up demo of course.


Thanks for the quick reply. Tween yeah! 

  • Like 1
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...