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
 

  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.