mousewheel 模擬滾動

zyip發表於2016-06-28

 

               div{
			box-sizing:border-box;
		}
		.father{
			width:500px;
			height:400px;
			margin:auto;
			margin-top: 50px;
			border: 1px solid red;
			overflow: hidden;
			position: relative;

		}

		.child{
			width:60%;
			height: 1210px;
			border: 1px solid green;
			margin:auto;
			position: absolute;
		 	left:100px;
		}

　　

function load(){
			window.child=document.getElementById('child');
			window.father=child.parentNode;
			father.addEventListener('mousewheel',function(e){
			// father.addEventListener('scroll',function(e){
				e.preventDefault();
				e.stopPropagation();
				move(e.deltaY*-1);
			})
		}

		function move(offset)
		{
			var top = child.style.top;
			if(top==='')
			{
				top=0;
				offset= offset/1 + top/1;
			}
			else
			{
				top=top.replace('px','');
				offset= offset/1 + top/1;
			}
			var moved=Math.abs(offset) +father.offsetHeight;
			if(moved>child.offsetHeight && offset<0)
			{
				child.style.top = -1*(child.offsetHeight-father.offsetHeight+6) +'px';
				return;
			}
			if(offset>0)
			{
				child.style.top='0px';
				return;
			}
			child.style.top=(offset) +'px';
		}

　　

<body onload="load()">
<div class="father">
	<div class="child" id="child">
	</div>
</div>

　　

 

相關文章