Jump to content
GreenSock

Thomas Günther

Convert vertical scroll to horizontal scroll (with Observer?)

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Paging @GreenSock then!

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • 2 weeks later...

@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. 

Link to comment
Share on other sites

@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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 😅

  • 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.
×