Convert vertical scroll to horizontal scroll (with Observer?)

[Thomas Günther 50 Likes (Contributor)]

I'm currently trying to scroll a horizontally overflowing element via vertical scroll. A lot of people don't have a trackpad, horizontal mouse wheel or the knowledge you can hold shift to scroll horizontally. Those that do should however still be able to scroll horizontally.

 

Now I know you can use something like ScrollTrigger to turn the scrolling into transforms but I'd like to keep the regular scroll behavior, including a scroll bar, the native mobile behavior, etc.

 

Observer.create({
  target: window,
  type: "wheel",
  onChangeY: (self) => {
    document.documentElement.scrollLeft += self.deltaY;
  }
});

 

With a simple Observer I turn the vertical scroll into horizontal scroll but I noticed some issues: the speed seems to be doubled and the scroll doesn't look very smooth.

 

Maybe somebody has an idea why that is? Thanks in advance!

 

I created a simplified CodePen that you might want to open in a new tab to test the scrolling:

 

See the Pen MWQOeWv by medienbaecker (@medienbaecker) on CodePen

[Cassie 5,649 Likes (Superhero)]

This is a lovely solution Thomas - great to see accessibility being thought out.

It's looking really smooth for me on my mac using a trackpad and not much difference between the speeds, what are you using?

[Thomas Günther 50 Likes (Contributor)]

Thank you, Cassie! I do use a trackpad myself and don't see an issue. My client uses a mouse wheel (on macOS) and noticed stutters. Then I installed Windows and as you can see it behaves even weirder: https://share.cleanshot.com/sgJlHK

 

So I'm wondering if this is even the right approach.

[Cassie 5,649 Likes (Superhero)]

Ah ok! That's in an iframe - so my first step would be to check if you get the same behaviour in debug mode on windows.

It seems like a solid approach - don't you worry we'll find out what's going on!

https://cdpn.io/pen/debug/QWQOGbX

[Thomas Günther 50 Likes (Contributor)]

Yes, unfortunately it's the same behaviour in debug mode and on the live website 😔

[Cassie 5,649 Likes (Superhero)]

Ah, annoying. Ok.

Just testing an idea here - is this any better?

See the Pen QWQOGbX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Thomas Günther 50 Likes (Contributor)]

Thank you! Unfortunately the issue on Windows doesn't seem to be solved by this: https://share.cleanshot.com/RUtPr3

 

It might solve the issue on the client's PC though. The virtual machine is probably an edge case. I'll keep you updated.

[Cassie 5,649 Likes (Superhero)]

No worries. It was a long shot, I thought maybe if it was eased it wouldn't jitter.

Paging @GreenSock then!

[Cassie 5,649 Likes (Superhero)]

This would potentially be another route -

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

[Cassie 5,649 Likes (Superhero)]

I quite like that your solution respects normal horizontal scroll - but this way is quite commonly used to get around the issue you stated
 

Quote

 A lot of people don't have a trackpad, horizontal mouse wheel or the knowledge you can hold shift to scroll horizontally

 

[GreenSock 18,874 Likes (Superhero)]

@Thomas Günther sorry I'm late to the party. So are you saying that this is only a problem on a Windows machine with a mouse wheel? I tried on my Mac with both a Magic Mouse and normal windows Mouse and trackpad. No issues whatsoever. From the video you shared, it looked like you were getting deltaY values that were bouncing back and forth between positive and negative - is that true? Did you verify that with console.log() at all? Just trying to get as much data as I can. 

[Thomas Günther 50 Likes (Contributor)]

@GreenSock I created a pen to debug the deltaY values: 

See the Pen WNMZQRZ by medienbaecker (@medienbaecker) on CodePen

 

On Windows machines I get this behavior when my cursor is in a horizontally scrollable area so I guess there's a discrepancy between the regular scroll and the JS scroll? https://share.cleanshot.com/E7Dzfm

[GreenSock 18,874 Likes (Superhero)]

Thanks for the minimal demo, @Thomas Günther. Yeah, I believe the delta values from mouse events are handled by various browsers and operating systems differently. You can set your mouse wheel to go in chunks of 3 lines at a time, for example, or various other amounts. 

 

To make things worse, Chrome on Windows applies a subtle smoothing to native scroll and that's probably why the JS-driven one looked more jerky - it's doing exactly what you requested, but the browser is sneakily smoothing out the native (non-JS) scroll.

 

So I guess I'm a little fuzzy here on if you are saying you think there's a problem with Observer or this was just a frustration with how Windows handles delta oddly in various browsers? Is there something you think we should do to Observer to improve it? 

 

In terms of your particular solution, you could tween the scroll rather than setting it if your goal is to smooth things out. A gsap.quickTo() may be a great option here. And you could use various multipliers for different browsers and operating systems. Annoying, I know, but I'm not sure what else you can do to make things consistent. 

[Thomas Günther 50 Likes (Contributor)]

Thanks for the detailed answer, @GreenSock — it does indeed sound like this is not related to GSAP or Observer but the browser/OS. Sorry for wasting your time 😔

 

At least now I know why everyone's using transforms for horizontal scrolling, I guess 😅