Advanced Search

Scroll Page Horizontally With Mouse Wheel

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. 1) Load jQuery and the Mouse Wheel plugin
  2.  
  3. Mouse Wheel plugin: (http://plugins.jquery.com/project/mousewheel).
  4.  
  5. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
  6. <script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
  7.  
  8.  
  9.  
  10.  
  11. 2) Attach mousewheel event to body
  12.  
  13. The "30" represents speed. preventDefault ensures the page won't scroll down.
  14.  
  15. $(function() {
  16.  
  17.    $("body").mousewheel(function(event, delta) {
  18.  
  19.       this.scrollLeft -= (delta * 30);
  20.  
  21.       event.preventDefault();
  22.  
  23.    });
  24.  
  25. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.