Advanced Search

Horizontal Mouse Wheel Scrolling

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

Expand | Embed | Plain Text

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.