scrollTop的值为什么会自己动

发布网友发布时间：2022-04-22 05:55

共1个回答

热心网友时间：2022-04-22 07:24

如果你的目的是让红色方块自动跑到右下角，那么你的做法是错误的，不能用onscroll事件来驱动，因为每次滚动屏幕时，效果都会叠加到里面的计时器中（因为滚动时计时器并没有结束），造成误差越来越大。此外你每次都是加减5px，这样是无法保证方块的位置与目标位置相等的，比如说方块当前位置是853px，而目标位置是855px，这样853再加5就是858，不等于855，然后它会减5又变为853，这样方块就会在853和858之间来回跳动，不会停止下来。
下面是我改动后的代码，你自己看看：
<!DOCTYPE html>
<html>
<body>
<style>
body{height:2000px;}
#box{width:100px; height:100px; background:red; position:absolute; bottom:0; right:0;}
</style>
<script>
window.onload=function(){
function move(){
var bo=document.getElementById('box');
var pp=document.getElementById('p');
var qq=document.getElementById('q');
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var tar=scrollTop+document.documentElement.clientHeight-bo.offsetHeight;
if(Math.abs(tar-bo.offsetTop)<=5){
bo.style.top=tar+"px";
}else if(tar>bo.offsetTop){
bo.style.top=(bo.offsetTop+5)+'px';
}else{
bo.style.top=(bo.offsetTop-5)+'px';
}
pp.innerHTML='top'+bo.offsetTop;
qq.innerHTML='scr'+scrollTop+' '+'tar'+tar;
}
setInterval(move,50);
}
</script>
<div id='box'><p id='p'></p ><p id='q'></p ></div>
</body>
</html>