JavaScript 自定义Mootools滚动

Posted 2021-05-20

<script type="text/javascript">

window.addEvent('domready', function() {

	if ( ($('container_Scroll_content').getSize().size.y) > ($('container_Scroll').getSize().size.y) ) {

		myScrollFx = new Fx.Scroll('container_Scroll', {
			wait: false
		});
		mySlide = new Slider($('areaScroll'), $('knobScroll'), {
			steps: $('container_Scroll_content').getSize().size.y-($('container_Scroll').getSize().size.y),
			mode: 'vertical',
			onChange: function(step){
				$('container_Scroll').scrollTo(0,step);
			}
		}).set(0);
		
	}
	else {
		$('areaScroll').setStyle('visibility','hidden');
	}
	
});

document.addEvent('mousewheel', function(e) {
        e = new Event(e).stop();
        var step = mySlide.step - e.wheel * 10;
        mySlide.set(step);
});

</script>



<div id="container_Scroll">
<div class="text10pxWhite" id="container_Scroll_content">
THE END
</div>
</div>
<div id="areaScroll">
<div id="knobScroll"></div>
</div> 




#knobScroll{
	height: 25px;
	width: 15px;
	background-image:url(_images/slide.gif);
	background-repeat:no-repeat;
	cursor: pointer;
}
#areaScroll {
	/*background-image:url(../_images/bg_slider.gif);
	background-repeat:repeat-y;*/
	background-color:#4b4a43;
	height: 340px;
	width: 15px;
	float:right;
}

#container_Scroll {
	margin:0px;
	width: 500px;
	height: 340px;
	overflow:hidden;
	float:left;
}

#container_Scroll_content {
	padding:0px;
	margin:0px;
	width: 500px;
}