用JS改滚动条数值的小问题,谢谢了
这段代码测试了没有bug
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.main{width:100%; height:3000px; background:#ccc;}
.toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
<a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
</body>
<script type="text/javascript">
var timer;
var lock=1;
function setPageScrollTop(value){
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
document.body.scrollTop=value;
}else{
document.documentElement.scrollTop=value;
}
}
function getPageScrollTop(){
var zhi=0;
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
zhi=document.body.scrollTop;
}else{
zhi=document.documentElement.scrollTop;
}
return zhi;
}
function detail(mu){
var dang=getPageScrollTop();
if(dang>=mu){
dang-=50;
if(dang<=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else if(dang<mu){
dang+=50;
if(dang>=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else{}
setPageScrollTop(dang);
}
function ding(){
var mu=1000;
if(lock==1){
lock=0;
timer=window.setInterval(function(){
detail(mu)
},30);
}
}
</script>
</html>
给它稍微变形了一下,就出BUG了,当滚筒条在上面的时候,点击滚动条往下走,然后用鼠标拉着滚动条往下走的时候就走不动了 出现了BUG
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{padding:0; margin:0;}
.main{width:100%; height:3000px; background:#ccc;}
.toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
<a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
</body>
<script type="text/javascript">
var timer;
var lock=1;
function setPageScrollTop(value){
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
document.body.scrollTop=value;
}else{
document.documentElement.scrollTop=value;
}
}
function getPageScrollTop(){
var zhi=0;
var a=window.navigator.userAgent;
var z=a.toLowerCase();
var b=z.indexOf('safari');
if(b!=-1){
zhi=document.body.scrollTop;
}else{
zhi=document.documentElement.scrollTop;
}
return zhi;
}
function detail(mu){
var dang=getPageScrollTop();
if(dang>=mu){
var speed=Math.ceil((dang-mu)/4);
dang=dang-speed;
if(dang<=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else if(dang<mu){
var speed=Math.ceil((mu-dang)/4);
dang=dang+speed;
if(dang>=mu){
dang=mu;
window.clearInterval(timer);
lock=1;
}
}else{}
setPageScrollTop(dang);
}
function ding(){
var mu=1000;
if(lock==1){
lock=0;
timer=window.setInterval(function(){
detail(mu)
},50);
}
}
</script>
</html>找不到问题出在哪了,很郁闷
求解,很感谢大家
展开
收起
1
条回答
写回答
写回答
-
原因是楼主点了“走起”按钮后，没等滚动条稳定下来，即没调用clearInterval方法就往下拉，所以出现那个情况，为了验证说法还是贴个代码吧。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{padding:0; margin:0;} .main{width:100%; height:3000px; background:#ccc;} .toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;} </style> <body> <div class="main"></div> <div class="toTop"> <a href="javascript:void(0)" onclick="ding()">走起</a> </div> <div id="message" style="position:fixed;border:1px solid red;top:100px;left:100px;width:200px;height:100px;"> hello,world! </div> </body> <script type="text/javascript"> var timer; var lock=1; function setPageScrollTop(value){ var a=window.navigator.userAgent; var z=a.toLowerCase(); var b=z.indexOf('safari'); if(b!=-1){ document.body.scrollTop=value; }else{ document.documentElement.scrollTop=value; } } function getPageScrollTop(){ var zhi=0; var a=window.navigator.userAgent; var z=a.toLowerCase(); var b=z.indexOf('safari'); if(b!=-1){ zhi=document.body.scrollTop; }else{ zhi=document.documentElement.scrollTop; } return zhi; } function detail(mu){ var dang=getPageScrollTop(); if(dang>=mu){ var speed=Math.ceil((dang-mu)/4); dang=dang-speed; document.getElementById("message").innerHTML = "dang:" + dang; if(dang<=mu){ dang=mu; window.clearInterval(timer); document.getElementById("message").innerHTML = "cleared"; lock=1; } }else if(dang<mu){ var speed=Math.ceil((mu-dang)/4); dang=dang+speed; document.getElementById("message").innerHTML = "dang:" + dang; if(dang>=mu){ dang=mu; window.clearInterval(timer); document.getElementById("message").innerHTML = "cleared"; lock=1; } }else{ document.getElementById("message").innerHTML = ""; } setPageScrollTop(dang); } function ding(){ var mu=1000; if(lock==1){ lock=0; timer=window.setInterval(function(){ detail(mu) },50); } } </script> </html>2019-07-17 19:06:41赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
