mousewheel 模拟滚动
Posted zyip
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mousewheel 模拟滚动相关的知识，希望对你有一定的参考价值。
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>
以上是关于mousewheel 模拟滚动的主要内容，如果未能解决你的问题，请参考以下文章
mousewheel,DOMMouseScroll判断滚轮滚动方向