zoukankan      html  css  js  c++  java
  • mousewheel 模拟滚动

                   div{
    			box-sizing:border-box;
    		}
    		.father{
    			500px;
    			height:400px;
    			margin:auto;
    			margin-top: 50px;
    			border: 1px solid red;
    			overflow: hidden;
    			position: relative;
    
    		}
    
    		.child{
    			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>
    

      

  • 相关阅读:
    题目1101:计算表达式
    九度oj 题目1107:搬水果
    [Hihocoder] 字符串排序
    [hzwer] 模拟T
    [Luogu] 宝藏
    [Luogu] 列队
    [Luogu] 奶酪
    [Luogu] 逛公园
    [Luogu] 时间复杂度
    [Luogu] 小凯的疑惑
  • 原文地址:https://www.cnblogs.com/zyip/p/5625304.html
Copyright © 2011-2022 走看看