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

今天在学习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">

    <head>

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

    <body>

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

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <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语句,清除计时器.

理解了.

关于javascript的window.onscroll方法的更多相关文章

  1. $(document).ready() 和 window.onload 方法比较

    说明 页面加载文档完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件. Javascript 使用 window.onload 方法,而 jQuery 使用 $(document). ...

  2. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  3. addEventListener解决多个window.onscroll共存的2个方法

    方法1.(注意第一个和第二个的先后次序) window.onscroll=function(){console.log('第一个');} var oldMethod = window.onscroll ...

  4. javaScript 对象的hasOwnProperty方法打印window自定义属性

    for (var name in window) { if (window.hasOwnProperty(name)) { window.console.log ( name + " : & ...

  5. Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的.   1.执行时间 win ...

  6. javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...

  7. 收集JavaScript中常用的方法函数

    本文中,收集了一些比较常用的Javascript函数,希望对学习JS的朋友们有所帮助. 1. 字符串长度截取 function cutstr(str, len) { var temp, icount ...

  8. 你想的到想不到的 javascript 应用小技巧方法

    javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...

  9. JavaScript常用对象的方法和属性

    ---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...

随机推荐

  1. nodejs的mysql模块学习(四)断开数据库连接

    断开连接有两种方式 end()函数 在这种情况下 所有先前排队的查询 仍然可以继续继续发送到服务器,但是如果在执行到断开连接的命令之前发生了致命的错误,那么end()将不会被执行 connection ...

  2. jQuery之父：每天都写点代码

    去年秋天,我的“兼职编程项目”遇到了一些问题:要不是从 Khan Academy 的项目里挪出时间来的话,我根本没办法将不理想的进度弥补上. 这些项目遇到了一些严重的问题.之前的工作我主要是在周末,有 ...

  3. web2.0、互联网+、IT时代与DT时代、工业4.0 引发的思考

    最近忙着找实习,来学校一个星期还没到,就感觉已经经历了几个春秋. 第一个实习面试是个杭州互联网小公司,面WEB前端开发实习,怪我一个暑假两个月一点书都没碰,偏偏赶上G20到9/9才开学,没啥准备就一头 ...

  4. 关于location.href几种用法的区别

    常见的几种开发形式: self.location.href; window.location.href; this.location.href; location.href; parent.locat ...

  5. Java Concurrency - ReadWriteLock & ReentrantReadWriteLock

    锁所提供的最重要的改进之一就是 ReadWriteLock 接口和它的实现类 ReentrantReadWriteLock.这个类提供两把锁,一把用于读操作和一把用于写操作.同一时间可以有多个线程执行 ...

  6. Linux 命令 - ls: 列出目录内容

    ls 命令很可能是用户最常使用的命令,通过 ls 命名可以查看目录内容,确定各种重要文件和目录的属性. 命令格式 ls [OPTION]... [FILE]... 命令参数 -a, --all 列出所 ...

  7. 非Page类使用session（Httpcontext.session和page.session区别）

    ASP.NET中Session高级使用技巧 在开发Aspx .NET软件时,有时需要把常用的东西封装到一个非PAGE类中,文章介绍在非Page类中使用Session的方法. 一.PAGE参数法: 1. ...

  8. Cocos开发中性能优化工具介绍之使用Windows任务管理器

    说到Windows平台,我们很快就想到了Visual Studio 2012,然而Visual Studio 2012在这方面没有很好的工具.如果我们只是想知道大体上内存.CPU等在某一事件前后变化情 ...

  9. Xcode 真机无法调试

    关于只能在模拟器上测试不能在真机测试的问题 2. 在 buildSetting 里面搜索bitcode,更改为 No 即可.

  10. UIPickerView常见属性、常见方法（包括代理方法和数据源方法）的一些说明

    一.UIPickerView 1.UIPickerView的常见属性 // 数据源(用来告诉UIPickerView有多少列多少行) @property(nonatomic,assign) id< ...