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

今天在学习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. [转]一步步教你如何在 Visual Studio 2013 上使用 Github

    介绍 我承认越是能将事情变简单的工具我越会更多地使用它.尽管我已经知道了足够的命令来使用Github,但我宁愿它被集成到IDE中.在本教程中,我会告诉你使用Visual Studio 2013如何实现 ...

  2. CSS code snip enjoy.

    <!-- information-total得是动态获取吧. --> <div class="information-mod"> <div class ...

  3. [改善Java代码]正确使用String,StringBuffer,StringBuilder

    CharSequence接口有三个实现类与字符串有关:String,StringBuffer,StringBuffer.虽然它们都与字符串有关,但是其处理机制是不同的. String类是不可改变的量, ...

  4. Netty学习链接

    Netty实战精髓请参见:https://waylau.gitbooks.io/essential-netty-in-action/content/GETTING%20STARTED/Introduc ...

  5. poj 2723 2-SAT问题

    思路:二分枚举能开的门的数量,将每次枚举转换成2-SAT问题.这里存在的矛盾是假设有门上a,b两个锁,a锁对应于1号钥匙,而一号钥匙的配对是2号钥匙,b锁对应于3号钥匙,3号的配对是4号钥匙.那么2号 ...

  6. hdu 4607 树的直径

    思路:利用dfs遍历整棵树,找出最长子树与次长子树,两者的和最大就是直径. 若k值小于直径就输出k-1,否则输出(k-d-1)*2+d; #include<iostream> #inclu ...

  7. Spring 简单入门实例

    首先新建一个Web 项目 导入相应Jar 包 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...

  8. Linux 内核简介

    Linux内核简介 一.系统架构 (1). Linux系统架构 ##用户空间: 文件系统 C库 ##内核空间: 接口 内核 (2). Linux内核架构 二.Linux内核源代码 下载地址 www.k ...

  9. 关于类型“LinkButton”的控件“xxx”必须放在具有 runat=server 的窗体标记内问题的解决方案

    1.首先确认LinkButton控件包含在Form中,检查该Form有无runat标记,如果有,排除Form原因,请继续看. 2.如果看到这里,估计你是在做Excel导出功能.在后台代码中重写Veri ...

  10. Linux 命令 - ftp: 网络文件传输工具

    命令格式 ftp [-pinegvd] [host] 命令参数 -A 传输文件模式为主动模式. -p 传输文件模式为被动模式. -i 关闭交互模式. -n 关闭自动登录功能. -e 不记录历史命令. ...