Jump to content
Search Community

Convert vertical scroll to horizontal scroll (with Observer?)

Thomas Günther test
Moderator Tag

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

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

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

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