新手求助,我写的js侧边栏上下滑动固定效果,为什么我的一直上下抖动

鼠标滚动得快的时候就出现问题,怎么解决啊?

 <!DOCTYPE html>  
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body{
        height: 2500px;
    }
        #Div{
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;
            right: 0;
        }
        #text{
            width:400px;
            height: 30px;
            position: fixed;
        }
    </style>
    <script type="text/javascript">
        window.onscroll = function(){   
            var div=document.getElementById('Div');
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            var target=parseInt(scrollTop+(document.documentElement.clientHeight-div.offsetHeight)/2);
            startMove(target);

        }
        function startMove(target){
                var timer=null; 
                var div=document.getElementById('Div'); 
                clearInterval(timer);
                timer=setInterval(function(){                   
                    var iSpeed=(target-div.offsetTop)/8;    
                    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                    var text = document.getElementById('text'); 
                        text.value="目标为: "+target+" offsetTop: "+div.offsetTop+ " iSpeed:"+iSpeed;

                    if(div.offsetTop==target)
                    {   

                        clearInterval(timer);

                    }
                    else{
                        div.style.top=div.offsetTop+iSpeed+'px';                        
                    }
                },30);  

            }
    </script>
</head>
<body>
    <div id="Div"></div>
    <input type="text" id="text"/>
</body>
</html>

2个回答

定时器那里调用的有问题。
在window.onscroll的时候触发了多个定时器。
你可以多次上下滚动。会发现上下抖动的幅度变的更大。
还有。建议把定时器对象返回给startMove(target)方法。
在window.onscroll = function()调用后清除定时器
window.onscroll = function(){

var div=document.getElementById('Div');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var target=parseInt(scrollTop+(document.documentElement.clientHeight-div.offsetHeight)/2);
var timer = startMove(target);
clearInterval(timer); //在这里加上清除定时器
}

yuxiaoxia28
yuxiaoxia28 之前都没注意定时器的问题,因为每次调用函数都先把把定时器关掉了。我试了一下你的方法发现还是不行,我试着把定时器声明放在外面,就没有发生抖动了
5 年多之前 回复

你写固定效果使用css不就可以了吗?你看下这个是否符合你的要求?

 <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
    <style type="text/css">
        body{margin:0; padding:0; height:3000px;}
        div.div1{margin-top:100px; padding:0; width:100px; height:100px; border:1px solid #cccccc; background-color:black; position:fixed;}
    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
    <!-- div1是固定的一块 -->
    <div class="div1">
  </div>
    <div class="test1" style="height:1000px; background-color:#cce8ef;">
    </div>
    <div class="test2" style="height:1000px; background-color:#bcbcbc;">
    </div>
    <div class="test3" style="height:1000px; background-color:blue;">
    </div>
</body>
</html>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问