window.onscroll - 張暁磊

相关文章推荐

酒量大的春卷 · 2023年度国家科学技术进步奖获奖项目目录（ ...· 3 月前 ·

憨厚的遥控器 · 枣庄银行1年4名高管被查：副行长通过民间借贷 ...· 6 月前 ·

英姿勃勃的酱牛肉 · [统计视点]-平顶山市统计局欢迎您！· 7 月前 ·

爱旅游的柠檬 · 筑梦天下——电视政论片《百年潮·中国梦》解说 ...· 1 年前 ·

逃课的蚂蚁 · 搜索结果_风弄小说集下载打包百�· 1 年前 ·

---恢复内容开始---

今天在学习javascript的过程中被onscroll这个东西堵了一下午.心情极度郁闷.

在高度较大的网页中，我们通常会加一个返回顶部的按钮，方便用户操作.

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            div{height:300px;}
            #btn1{position:fixed;bottom:0;right:0;}
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var oDiv = document.getElementsByTagName('div');
                var oBtn = document.getElementById('btn1');
                var timer = null;
                var oSys = true;
                var i = 0;
                for (i = 0;i<oDiv.length;i++)
                    if(i%2 == 0)
                        oDiv[i].style.background = 'yellow';
                    }else if(i%3 == 0)
                        oDiv[i].style.background = 'red';
                    }else if(i%5 == 0)
                        oDiv[i].style.background = 'blue';
                    }else
                        oDiv[i].style.background = 'green';
                window.onscroll = function(){
                    if(!oSys)
                        clearInterval(timer);
                    oSys = false;
                oBtn.onclick = function(){
                    timer = setInterval(function(){
                        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                        var iSpeed = Math.floor(-scrollTop/8);
                        oSys = true;
                        if(!scrollTop)
                        clearInterval(timer);
                        document.documentElement.scrollTop = scrollTop + iSpeed ;
                    }，300)
        </script>
    </head>
        <input type="button" id="btn1" value="backtotop" />
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

弄这么多DIV纯粹是为了填充高度，其实大可不必，设置一个高大上的DIV足以，但是当时脑残了.废话不说.实现的功能就是点击返回顶部按钮的时候，页面可以以一个舒服的缓慢减速效果移动到顶部.这当中就产生了一个问题.如果页面很长，用户在点击返回顶部按钮后，页面移动到顶部的过程中想停下来 (也许发现了什么有趣的东西)，如何去停止计时器.

大家知道，在页面想顶部移动过程中，势必要触发window.scroll事件.如果要在触发事件后停下来的话，很简单:

window.onscroll = function(){
     clearInterval(timer);          
这样，只要用户在页面返回顶部过程中拖动滑动条，页面就会停止自动滚动.但是很明显，返回顶部的函数也会触发window.onscroll事件，这样，我们点击返回顶部后，页面向上移动一下，就会停下来.因为计时器被清除了.
那么如何才能让浏览器识别出到底是系统在执行函数的自动滚动，还是用户自己操作的呢?
在第一段代码中，我们声明了一个变量:oSys，定义为true.之后我们在计时器函数中插入了它(请自己看代码).这样每次计时器执行内置函数的时候，都会初始化oSys的值为true.
结合下面的代码段:
window.onscroll = function(){
   oSys = false;
效果就是，当计时器中的函数在执行过程中，oSys变量的值被初始化为true.而一旦函数执行滚动语句，就触发window.onscroll事件，导致oSys的值变为false?为了检验这个结论，下了下面代码
<!DOCTYPE html>
        <meta charset="utf-8">
        <title></title>
    </head>
        <div style="height:5000px;width:100%;background:gray;"></div>
        <input type="button" id="btn1" value="toTop" style="position:fixed;bottom:0;right:0;"/>
        <script type="text/javascript">
            var oSys = true;
            var oBtn = document.getElementById('btn1');
            oBtn.onclick = function(){
                setInterval(function(){
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var iSpeed = Math.floor(-scrollTop/8);
                    var oSys = true;
                    if(scrollTop){
                        document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
                        alert(oSys);
                }，3000)
            window.onscroll = function(){
                oSys = false;
        </script>
    </body>
</html>
结果发现每次弹出的都是true.这说明我们上面的推论是错误的.
那就是说window.onscroll事件是在滚动完成后触发的，而不是滚动的同时.这也符合函数按顺序依次执行的逻辑:在滚动函数执行完成后， 进入window.onscroll触发的函数.那么可以确定，每次进入window.onscroll函数时，oSys的值总是true.而触发 onscroll事件后，进入onscroll引用的函数function(){oSys = false}，然后oSys的值变为false.
假设我们加上这样一段代码
window.onscroll = function(){
    if(!oSys)
        clearInterval(timer);   
    oSys = false;  
当计时器函数的一个周期执行完毕后，并且触发的onscroll事件函数也执行完毕后，oSys的值一定为false.此时如果又进入了onscroll事件函数，那么有两种可能.
1.计时器函数进入了下一次循环，初始化oSys的值为true.执行完自身后，触发onscroll事件，进入onscroll触发的匿名函数，此事，oSys的值为true.跳过if语句，不清除计时器.
2.计时器还没有进入下一次循环，是用户手动操作触发了onscroll事件的函数，那么此时oSys的值由于没有进过计时器函数内部的oSys初始化，所以值仍然为false.所以会进入if语句，清除计时器.