scrollTop的值为什么会自己动
在下小白想请问下下面的代码，为什么我拉滚动条停下了，但是scrollTop的值还在自己动？<!DOCTYPEhtml><html><body><style>body{he...
在下小白 想请问下下面的代码，为什么我拉滚动条停下了 ，但是scrollTop的值还在自己动？
<!DOCTYPE html>
<html>
<body>
<style>
body{height:2000px;}#box{width:100px; height:100px; background:red; position:absolute; bottom:0; right:0;}</style>
<script>
window.onscroll=function()
{
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;
function move(target){
var timer=setInterval(function(){
var speed=0;
if(target>bo.offsetTop)
{
speed=5;
}
else
{
speed=-5;
}
if(target==bo.offsetTop)
{
clearInterval(timer);
}
else
{
bo.style.top=bo.offsetTop+speed+'px';
}
pp.innerHTML='top'+bo.offsetTop;
qq.innerHTML='scr'+scrollTop+' '+'tar'+target;
},1000)
}
move(tar);
}
</script>
<div id='box'><p id='p'></p ><p id='q'></p ></div>
</body>
</html> 展开
<!DOCTYPE html>
<html>
<body>
<style>
body{height:2000px;}#box{width:100px; height:100px; background:red; position:absolute; bottom:0; right:0;}</style>
<script>
window.onscroll=function()
{
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;
function move(target){
var timer=setInterval(function(){
var speed=0;
if(target>bo.offsetTop)
{
speed=5;
}
else
{
speed=-5;
}
if(target==bo.offsetTop)
{
clearInterval(timer);
}
else
{
bo.style.top=bo.offsetTop+speed+'px';
}
pp.innerHTML='top'+bo.offsetTop;
qq.innerHTML='scr'+scrollTop+' '+'tar'+target;
},1000)
}
move(tar);
}
</script>
<div id='box'><p id='p'></p ><p id='q'></p ></div>
</body>
</html> 展开
1个回答
展开全部
如果你的目的是让红色方块自动跑到右下角，那么你的做法是错误的，不能用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>
下面是我改动后的代码，你自己看看：
<!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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
ZESTRON
2024-09-04 广告
在Dr. O.K. Wack Chemie GmbH，我们高度重视ZESTRON的表界面分析技术。该技术通过深入研究材料表面与界面的性质，为提升产品质量与可靠性提供了有力支持。ZESTRON的表界面分析不仅涵盖了相变化、化学反应、吸附与解吸...
点击进入详情页
本回答由ZESTRON提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
