Horizontal Scroll (ScrollTrigger) & ScrollSmoother causing page to move diagonally, not horizontally

growmybusiness · July 4, 2022

Hi there!

So I've setup a purely horizontal scroll site with ScrollTrigger, however now I've added in ScrollSmoother there is no ability to scroll! I did have an issue where it was scrolling diagonally, however I realised I had the wrapper and content selectors the wrong way around.

Has anybody else had this issue?

The attached codepen is a representation of the site, on the dev site I'm using it with Wordpress & the Divi theme, so if you're wondering why the odd selectors, that's why!

Thanks in advance,

Ben Elwood

See the Pen zYWvdvj by benjaminelwoods (@benjaminelwoods) on CodePen

GreenSock · July 5, 2022

Welcome to the forums, @growmybusiness. Thanks for being a Club GreenSock member! 💚

I noticed several problems:

You set overflow: hidden and max-height: 100vh on the <body>, thus you're making it impossible for a scrollbar to show.
ScrollSmoother works on the whole page, but it looks like you were trying to apply it to a certain <div> which won't work.
This results in end being "+=NaN":
```
end: () => "+=" + container.offsetWidth - container.innerWidth
```
Because container.innerWidth is not a thing
You didn't set you wrapper or content to valid elements. It should be at the root level.

Were you looking for something more like this?:

See the Pen mdxeqzo?editors=1010 by GreenSock (@GreenSock) on CodePen

growmybusiness · July 5, 2022

Ah! Of course, got lost in all of my attempts to fix other issues! Thank you so much.

Notifications

Messages

Horizontal Scroll (ScrollTrigger) & ScrollSmoother causing page to move diagonally, not horizontally

Recommended Posts

growmybusiness

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

growmybusiness

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members