3

So I have been trying for hours. Any tips or ideas on how to make a webpage scroll horizontal instead of scrolling down?

Edit: When someone scrolls vertically, instead of scrolling vertically you scroll Horizontally.

Nolan James Sarlo
  • 41
  • 1
  • 1
  • 5

1 Answers1

7

Here is what you need:

Example: http://css-tricks.com/examples/HorzScrolling/

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

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

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

One More Example: http://jsfiddle.net/ye259/4/

Jatin
  • 3,065
  • 6
  • 28
  • 42
  • Glad was able to help you :) – Jatin Jan 25 '15 at 00:10
  • the exmaple site doesn't work for my chrome (61.0.3163.100) on OS X and FireFox (56.0) on OS X. – Sgnl Oct 08 '17 at 09:37
  • This doesn't work on latest chrome or any browser, not sure if something has changed. No errors on console either. It used to work but don't remember up to when, maybe jquery version deprecation? Your jsfiddle example actually works, how can I use that example to apply the horizontal scroll on "body" by changing the id doesn't work. @Jatin . – Nikolaos Vassos Dec 04 '17 at 19:16
  • Can also confirm that this isn't working on Chrome 69.0.3497.100 – camelCaseCowboy Oct 02 '18 at 07:51
  • 1
    FYI for people: The "example" link doesn't work in many browsers, I'm guessing because it uses the original mousewheel plugin that is now outdated (the source is almost a decade old). I suggest using the jsfiddle example, which doesn't depend on a plugin and uses pure js. – auto Jun 14 '19 at 19:27