javascript-用JS改滚动条数值的小问题,谢谢了

问题描述

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

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

解决方案

原因是楼主点了“走起”按钮后，没等滚动条稳定下来，即没调用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>

解决方案二：

而原来你觉得正确的代码也有这个问题，不幸你试试在滚动条稳定之前拖拉滚动条试试。

解决方案三：

js滚动条
 js滚动条

时间： 2024-11-05 04:50:48

javascript-用JS改滚动条数值的小问题,谢谢了的相关文章

javascript-JS无干扰事件的小问题,谢谢啦

问题描述 JS无干扰事件的小问题,谢谢啦 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input value="点击0" type="button"/> <input v

问题描述 JS里全局全局变量的小问题,谢谢啦如果把选框内的代码挪到箭头的位置,为什么图片隐身这个效果就实现不了呢? 函数外面放一个用alert(value); 弹出来的value的值一直是变化的, 为什么document.getElementById('pic').style.opacity=value/100;放到函数外面, value的值就传递不进来了? 解决方案放在外面就不属于函数了,那么它只会执行一次.不会随定时器执行. 解决方案二: 没有执行,不在function内部,没有触发它执

js 自制滚动条的小例子_javascript技巧

写了个js自制滚动条,首先,先看一下demo(点击这里) 先有两个demo,右边那个黑色那个,是我一开始写的比较肤浅的代码: 复制代码代码如下: var scrollself=(function(){ var scrollblock, //滚动块 scrollcontent, //被滚动的内容 scrollbar, //滚动条 scrollpanel, //滚动内容的滚动区域 cdistance, //滚动内容要

matrix-gui-2.0 将javascript文件夹改成js文件夹

/******************************************************************************** * matrix-gui-2.0 将javascript文件夹改成js文件夹 * 说明: * 今天在测试的matrix-gui-2.0的时候总是找不到javascript中的js文件,直接访问也 * 提示没有权限索性直接将javascript文件夹名字修改为js,结果可以访问了,好像这个问 * 题之前有遇到过,没有去解决. * * 2

js控制滚动条缓慢滚动到顶部

<html> <head> <script type="text/javascript"> var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body.

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果_javascript技巧

本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

javascript滚轮控制模拟滚动条_javascript技巧

此实例通过对滚轮事件的监听,通过滚轮控制滚动条的上下移动,可以将其修改后运用与使用滚轮缩放图片.改变透明度等特效. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #boxwrap{ posi

js实现滚动条滚动到某个位置便自动定位某个tr_javascript技巧

要实现带滚动条的table,定位到某个tr,其实是很简单的,只有几行js代码就可以完成,具体内容如下 js代码 <strong><script type="text/javascript"> function test(){ var $objTr = $("#location"); //找到要定位的地方 tr $objTr.css("background-color","lightgray"); //设

js操作滚动条事件实例_javascript技巧

本文实例讲述了js操作滚动条事件的方法.分享给大家供大家参考.具体分析如下: 之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了. 下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed").css(&q