Horizontal Mouse Wheel Scrolling


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



Copy this code and paste it in your HTML
  1. /* Copyright 2008 Paul Bennett - http://paulicio.us
  2.  * Scroller.js
  3.  * Captures mouse wheel events and runs the ScrollSmoothly
  4.  * function based on their output.
  5.  * Aims to aid usability by allowing the user to scroll the
  6.  * page horizontally smoothly using only their mousewheel.
  7.  * Mousewheel event capture by Adomas Paltanavičius at http://adomas.org/
  8.  */
  9.  
  10. function handle(delta) {
  11. if (delta <0)
  12. ScrollSmoothly(10,10,'right');
  13. else if (delta >0)
  14. ScrollSmoothly(10,10,'left');
  15. else
  16. ;
  17. }
  18.  
  19. function wheel(event){
  20. var delta = 0;
  21. if (!event)
  22. event = window.event;
  23. if (event.wheelDelta) {
  24. delta = event.wheelDelta/120;
  25. if (window.opera)
  26. delta = -delta;
  27. } else if (event.detail) {
  28. delta = -event.detail/3;
  29. }
  30. if (delta)
  31. handle(delta);
  32. if (event.preventDefault)
  33. event.preventDefault();
  34. event.returnValue = false;
  35. }
  36.  
  37. var repeatCount = 0;
  38.  
  39. function ScrollSmoothly(scrollPos,repeatTimes, direction) {
  40. if(repeatCount < repeatTimes)
  41. if(direction == 'right')
  42. window.scrollBy(20,0);
  43. else
  44. window.scrollBy(-20,0);
  45. else
  46. {
  47. repeatCount = 0;
  48. clearTimeout(cTimeout);
  49. return;
  50. }
  51. repeatCount++;
  52. cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','"+ repeatTimes +"','"+ direction +"')",10);
  53. }
  54.  
  55. /* Initialization code. */
  56. if (window.addEventListener)
  57. window.addEventListener('DOMMouseScroll', wheel, false);
  58. window.onmousewheel = document.onmousewheel = wheel;

URL: http://paulicio.us

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.