A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > jQuery > Scroll Page Horizontally With Mouse Wheel Submit one!

Scroll Page Horizontally With Mouse Wheel

1) Load jQuery and the Mouse Wheel plugin

Mouse Wheel plugin is here.

<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>

2) Attach mousewheel event to body

The “30″ represents speed. preventDefault ensures the page won’t scroll down.

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

Reference URL

2 Responses

  1. stone says:

    I look for it long time, thank you very much.

  2. Peter Shi says:

    Hey
    Thanks for the post!
    It seems works in Firefox but not in Chrome.
    Any idea to make it run in Chrome?
    Thanks.

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.