zaxlctjs 2015-08-14 09:00 采纳率: 81%
浏览 1951
已采纳

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

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

  • 写回答

2条回答 默认 最新

  • tsinggao 2015-08-14 11:56
    关注

    原因是楼主点了“走起”按钮后,没等滚动条稳定下来,即没调用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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题