Diagonal scrolling

[romancavry]

Hello!

I have dynamic custom slider with both scroll directions. And when scrolling vertically, horizontal scrolling may also occur, and vice versa. How can i prevent this diagonal scrolling (in both directions by one drag)? So that only one handler is triggered — either horizontal or vertical.

[KingSora]

Good day @romancavry :)

I'm assuming you mean trackpad / touch scrolling and not mouse scrolling, correct?

[romancavry]

Good day! Yes, I should have clarified that, sorry :/

[KingSora]

Thats something that is not really specific to overlay scrollbars.. I'll give you my take anyway:

First you'd need to detect the intended scroll direction of the user, for trackpad you can use the wheel event and for touch the touchmove event. This could be done by specifying a threshold, lets say 50 pixels, where you track where the scroll started and where it ended. The axis which has the greater distance is the axis the user probably intended to scroll. After you got the axis you can play around of how to lock the scrolling axis. You could change the overflow-x or overflow-y of the viewport to hidden in order to prevent scrolling. Or you could continue using the events mentioned above and controll scrolling completely by javascript by preventing the default in those events.

[romancavry]

Thank you for the answer! I thought there could be a way to reach needed functionality using overflow: { x, y } options or 'scroll' event

[KingSora]

You can use overflow: { x, y } to only allow scrolling on one axis, but that axis is "static", so the option:

{
  overflow: {
    x: 'scroll',
    y: 'hidden',
  }
}

will only allow scrolling horizontally until you change it. This will also be enforced regardless of the input device.

[romancavry]

Okay, I did it. overflow: { x, y } options cannot be used because browsers don't preserve scroll position after setting/unsetting overflow: hidden. My workaround here is to use touch events as @KingSora mentioned above.

Here is the example (useMobileTouch hook)