Advanced Search

Custom Mootools Scroll

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

Expand | Embed | Plain Text

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.