Custom Mootools Scroll


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



Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2.  
  3. window.addEvent('domready', function() {
  4.  
  5. if ( ($('container_Scroll_content').getSize().size.y) > ($('container_Scroll').getSize().size.y) ) {
  6.  
  7. myScrollFx = new Fx.Scroll('container_Scroll', {
  8. wait: false
  9. });
  10. mySlide = new Slider($('areaScroll'), $('knobScroll'), {
  11. steps: $('container_Scroll_content').getSize().size.y-($('container_Scroll').getSize().size.y),
  12. mode: 'vertical',
  13. onChange: function(step){
  14. $('container_Scroll').scrollTo(0,step);
  15. }
  16. }).set(0);
  17.  
  18. }
  19. else {
  20. $('areaScroll').setStyle('visibility','hidden');
  21. }
  22.  
  23. });
  24.  
  25. document.addEvent('mousewheel', function(e) {
  26. e = new Event(e).stop();
  27. var step = mySlide.step - e.wheel * 10;
  28. mySlide.set(step);
  29. });
  30.  
  31. </script>
  32.  
  33.  
  34.  
  35. <div id="container_Scroll">
  36. <div class="text10pxWhite" id="container_Scroll_content">
  37. THE END
  38. </div>
  39. </div>
  40. <div id="areaScroll">
  41. <div id="knobScroll"></div>
  42. </div>
  43.  
  44.  
  45.  
  46.  
  47. #knobScroll{
  48. height: 25px;
  49. width: 15px;
  50. background-image:url(_images/slide.gif);
  51. background-repeat:no-repeat;
  52. cursor: pointer;
  53. }
  54. #areaScroll {
  55. /*background-image:url(../_images/bg_slider.gif);
  56. background-repeat:repeat-y;*/
  57. background-color:#4b4a43;
  58. height: 340px;
  59. width: 15px;
  60. float:right;
  61. }
  62.  
  63. #container_Scroll {
  64. margin:0px;
  65. width: 500px;
  66. height: 340px;
  67. overflow:hidden;
  68. float:left;
  69. }
  70.  
  71. #container_Scroll_content {
  72. padding:0px;
  73. margin:0px;
  74. width: 500px;
  75. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.