Direct all scrolling to the x-axis

[HeyHeyElske]

Not an issue, just a question. :)

Version 8.0.0

Great library!

What i'm trying to do:
I have a horizontal scrolling container. I want to direct all scrolling to the x-axis. So if you use the scroll wheel ( up - down ) it will scroll left-right. Also when you scroll left-right ( trackpad etc ) it will use default scroll left-right.

The start would be to use the "invertDelta" plugin to convert the axis. This already works great, when im scrolling up and down it scrolls the container left to right. But how to I combine this with the normal left to right behaviour?

Like this example:
buildinamsterdam.com

The only way I thought of to get it to work ( solution could be very wrong ) is to check if if the direction is horizontal / verical in the invertDeltaPlugin:
if (delta.x !== 0) { console.log("horizontal"); } else { console.log("vertical"); }

[idiotWu]

What's the expected behavior when you scroll up-down with a trackpad?

Edit: to be more explicitly, how will it behave when you get both delta.x and delta.y?

[HeyHeyElske]

What's the expected behavior when you scroll up-down with a trackpad?

Edit: to be more explicitly, how will it behave when you get both delta.x and delta.y?

Thanks for your response. :)

I think its about user intent which presents these cases:

• user scrolls down
• user scroll to the side
• user scrolls diagonally on trackpad
• user uses horizontal scrollbar

In this layout you would like the site to scroll horizontal which ever the intent of the user.

• user scrolls down ( we get y-value and x=0, invert delta )
• user scrolls to the side with trackpad ( we get x-value and y=0, dont invert delta )
• user scrolls diagonally for some reason ( we get x-value and y-value but only y would be used )
• users uses horizontal scrollbar ( we get x-value )

[idiotWu]

Not sure if it's a good solution, but I think you can simply keep the bigger delta value:

transformDelta({x, y}) {
  return {
    y: 0,
    x: Math.abs(x) > Math.abs(y) ? x : y,
  };
}

Demo: https://codepen.io/idiotWu/pen/KJNYye?editors=0010

[idiotWu]

Or maybe you can try the norm of vector (x, y):

transformDelta({x, y}) {
  return {
    y: 0,
    x: Math.sign(x || y /* in case deltaX = 0 */) * Math.sqrt(x*x + y*y),
  };
}

Edit: Math.sign(x || y) sometimes brings confusion

[idiotWu]

user scrolls to the side with trackpad ( we get x-value and y=0, dont invert delta )

An important point is that we are likely to get both deltaX and deltaY while using trackpads (even you don't intend to), so y = 0 barely happens.

Personally, I prefer using the norm of vector (x, y) (as commented above).

Edit: the first solution behaves better in the demo 🙃 https://codepen.io/idiotWu/pen/KJNYye?editors=0010

Code:

import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar';

class HorizontalScrollPlugin extends ScrollbarPlugin {
  static pluginName = 'horizontalScroll';

  transformDelta(delta, fromEvent) {
    if (!/wheel/.test(fromEvent.type)) {
      return delta;
    }
        
    const { x, y } = delta; 

    return {
      y: 0,
      x: Math.abs(x) > Math.abs(y) ? x : y,
    };
  }
}

Scrollbar.use(HorizontalScrollPlugin);

[nikandlv]

I think this should be implemented as a plugin or a feature. it has a lot of use-cases

[cytronn]

Hey, I m really struggling to use this plugin with react-smooth-scrollbar, any solution would come to mind?

[dnspnjrs]

Hey, I m really struggling to use this plugin with react-smooth-scrollbar, any solution would come to mind?

It depends what you are trying to do? This solution works fine in most cases.