advanced code snippet search

Posted By

Piotrek290 on 10/10/10


Tagged

scroll div javascript mouse


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

bobbym245


Scroll div by mouse

 / Published in: JavaScript
 
Expand | Embed | Plain Text 
  1. // CSS:
  2. #contacts { width: 300px; height: 500px; overflow: hidden; border: 1px solid #000; }
  3. #contacts ul li { padding: 5px; }
  4.  
  5. // JavaScript:
  6. $.onload(function(){
  7. 	var lastX = lastY = 0;
  8. 	$("#contacts")
  9. 	.on("mousedown", "click=1")
  10. 	.on("mouseup", "click=0")
  11. 	.on("mousemove", function(e){ 
  12. 		e = e||event;
  13. 		if(!lastX)lastX = e.clientX;
  14. 		if(!lastY)lastY = e.clientY;
  15.  
  16. 		if(click){
  17. 			var posX = lastX>e.clientX?1:(lastX<e.clientX?-4:0);
  18. 			var posY = lastY>e.clientY?5:(lastY<e.clientY?-5:0);
  19. 			this.scrollTop += posY;
  20. 		}
  21.  
  22. 		lastX = e.clientX;
  23. 		lastY = e.clientY;
  24. 	});
  25. });
  26.  
  27. // HTML:
  28. <div id="contacts">
  29. 	<ul id="touch">
  30. 		<li>Lorem ipsum dolor</li>
  31. 		<li>Lorem ipsum dolor</li>
  32. 		<li>Lorem ipsum dolor</li>
  33. 		<li>Lorem ipsum dolor</li>
  34. 		<li>Lorem ipsum dolor</li>
  35. 		<li>Lorem ipsum dolor</li>
  36. 		<li>Lorem ipsum dolor</li>
  37. 		<li>Lorem ipsum dolor</li>
  38. 		<li>Lorem ipsum dolor</li>
  39. 		<li>Lorem ipsum dolor</li>
  40. 		<li>Lorem ipsum dolor</li>
  41. 		<li>Lorem ipsum dolor</li>
  42. 		<li>Lorem ipsum dolor</li>
  43. 		<li>Lorem ipsum dolor</li>
  44. 		<li>Lorem ipsum dolor</li>
  45. 		<li>Lorem ipsum dolor</li>
  46. 		<li>Lorem ipsum dolor</li>
  47. 		<li>Lorem ipsum dolor</li>
  48. 		<li>Lorem ipsum dolor</li>
  49. 		<li>Lorem ipsum dolor</li>
  50. 		<li>Lorem ipsum dolor</li>
  51. 		<li>Lorem ipsum dolor</li>
  52. 		<li>Lorem ipsum dolor</li>
  53. 		<li>Lorem ipsum dolor</li>
  54. 		<li>Lorem ipsum dolor</li>
  55. 		<li>Lorem ipsum dolor</li>
  56. 		<li>Lorem ipsum dolor</li>
  57. 		<li>Lorem ipsum dolor</li>
  58. 		<li>Lorem ipsum dolor</li>
  59. 		<li>Lorem ipsum dolor</li>
  60. 		<li>Lorem ipsum dolor</li>
  61. 		<li>Lorem ipsum dolor</li>
  62. 		<li>Lorem ipsum dolor</li>
  63. 	<ul>
  64. </div>

Report this snippet  

You need to login to post a comment.