Changing vertical scroll to horizontal

Try this: You need to add a script reference to jquery and to the mouse wheel plugin. And then use this JS:

$(function() {
   $("body").mousewheel(function(evt, chg) {
      this.scrollLeft -= (chg * 50); //need a value to speed up the change
      evt.preventDefault();
   });
});

Script References:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/jquery.mousewheel.js"></script>

you can directly use the first one, jquery script, as is because it is a public repository, but the second, the mousewheel.js will require you to save the .js file somewhere on your server and provide a link to it (similar to how you provide links for images in the src attribute).

Plugin: https://github.com/brandonaaron/jquery-mousewheel

Reference: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Here's the solution to this if anyone is working on Chrome. The star selector is what made it functional for Chrome, and the html selector should enable the functionality on Firefox as well.

$(function() {
    $("html, body, *").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 50);
        event.preventDefault();
    });
});

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.