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

今天在学习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. python(3)-内置函数2

    frozenset()    定义一个不能添加修改的集合 >>> s = frozenset() >>> s.add("aaa") Traceb ...

  2. Mysql 5.6 新特性（转载）

    本文转载自 http://blog.csdn.net/wulantian/article/details/29593803 感谢主人的辛苦整理 一,安全提高 1.提供保存加密认证信息的方法,使用.my ...

  3. 使用 autoconf

    在此之前先说一下autooconf在linux下安装的问题,因为不知道怎么安装,我就直接在终端上输入autoconf,结果它会提示是否安装它,下面还有指定安装的方法,我 就直接输入,是什么命令记不住了 ...

  4. hdu 2665 划分树

    思路:裸的划分树 #include<iostream> #include<algorithm> #include<cstring> #include<cstd ...

  5. 如何评价微信小程序？

    这次我不站张小龙,虽然他说的「用完即走」的道理在,但我并不认为小程序会形成生态. (一) 仅仅从抽象场景上来讲,小程序当然很美好. 对开发者来说,不用费尽心思开发好多平台的 APP 了,不用考虑适配各 ...

  6. Qt之读取配置文件

    一.读取配置文件增删功能与修改参数数据 #ifndef CONFIG_H #define CONFIG_H #define QS_FILEPATH "E:\\woo\\Code\\Qt\\A ...

  7. 利用ExpandableListView和gridview 显示可展开折叠菜单导航

    这篇随身笔带来的是结合聚合数据“菜谱大全”做的一个菜谱可折叠一级+二级列表. 先发来一些截图一睹为快吧. ExpandableListView 可用于折叠型菜单列表,其布局主要通过getGroupVi ...

  8. JAVA语法之小结

    对于JAVA的语法,我做了个小节: 类名:所有类名称首字母大写,如果由几个单词组成,那么组合内的第一个单词首字母应当大写,可以包括数字但是不能以数字开头. 方法名:方法没应当小写,如果由几个单词组成, ...

  9. IIS实现301重定向

    301永久重定向对SEO无任何不好的影响,而且网页A的关键词排名和PR级别都会传达给网页B,网站更换了域名,表示本网页永久性转移到另一个地址,对于搜索引擎优化|SEO来说,给搜索引擎一个友好的信息,告 ...

  10. 了解下SoftReference

    昨天同事看到别人一段关于实现缓存功能的代码,看完之后他有点不明觉厉,哈哈,然后就给周围同事也看了下,可能之前大家都没用过SoftReference,所以并不明白是如何实现的. 于是我就把代码要了过来, ...