Changing vertical scroll to horizontal

Question

This seems to have been asked before without a sufficient answer. I have absolutely no knowledge of how to do this (including no plugins). I want my website to scroll horizontally when I actively scroll down vertically.

Some examples of what I mean: http://hotdot.pro/en/ and http://mashup.ikm.gda.pl/

To be clear, I don't care about the parallax effect that both of these websites utilize. I just want to scroll horizontally.

Thanks!

Answer 1

This can be solved in native JavaScript, without any library.

Example code

function transformScroll(event) {
  if (!event.deltaY) {
    return;
  }

  event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
  event.preventDefault();
}

var element = document.scrollingElement || document.documentElement;
element.addEventListener('wheel', transformScroll);

Explanation

While this solution does not lean on any library, it also takes other usage scenario's into account. When scrolling on a touchpad for example, the other solutions that lean on a single delta value all fall apart.

There are always multiple ways of scrolling with an input device. Laptops have touchpads, phones have touchscreens, mouses have scroll wheels. On top of that, you can modify your scroll direction for a scroll wheel by holding shift.

When preventing the default behaviour, we should also include the other possible directions a user can scroll in. Luckily screens only have two dimensions, so adding deltaY to deltaX covers all cases in this scenario.