Changing vertical scroll to horizontal

css, html, scroll

Solution

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/

Problem

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!

Original source