javascript滾輪控制模擬滾動條

時間 2019-12-04

標籤 javascript 滾輪控制模擬滾動條欄目 JavaScript 简体版

原文原文鏈接

此實例經過對滾輪事件的監聽，經過滾輪控制滾動條的上下移動，能夠將其修改後運用與使用滾輪縮放圖片、改變透明度等特效。javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#boxwrap{
				position: relative;
				width: 15px;
				height: 500px;
				margin: 50px auto;
				box-sizing: border-box;
				border: 1px solid gainsboro;
				border-radius: 6px;
			}
			#box{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 13px;
				height: 30px;
				background: gray;
				border-radius: 6px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function (){
				var boxwrp = document.getElementById('boxwrap');
				var box = document.getElementById('box');
				//兼容firefox
				if(boxwrp.addEventListener){
					document.addEventListener("DOMMouseScroll", fn, false);
				}
				document.onmousewheel = fn;//兼容IE、chrome
				
				function fn(ev){
					var ev = ev||event;
					var bool = false;
					//IE、chrome  向上：120，向下：-120
					if(ev.wheelDelta){
						bool= ev.wheelDelta > 0? true : false;
					}
					//firefox  向上：-3，向下：3
					else{
						bool= ev.detail < 0? true : false;
					}
					
					if(bool){
						if(box.offsetTop>=10){
							box.style.top = box.offsetTop - 10 + "px";
						}
						else{
							box.style.top = 0;
						}
						
					}
					else{
						if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){
							box.style.top = box.offsetTop + 10 + "px";
						}
						else{
							box.style.top = boxwrp.offsetHeight - box.offsetHeight + "px";
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="boxwrap">
			<div id="box"></div>
		</div>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。