开发者社区> 问答> 正文

用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>

找不到问题出在哪了,很郁闷
求解,很感谢大家

展开
收起
小旋风柴进 2016-03-13 08:56:01 2005 0
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:01:40
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载