javascript监听事件之监听页面滚动的示例

这篇文章主要为大家展示了javascript监听事件之监听页面滚动的示例，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“javascript监听事件之监听页面滚动的示例”这篇文章吧。

JavaScript的特点

1.JavaScript主要用来向HTML页面添加交互行为。 2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。 3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

监听事件

代码

function pageChange () {
    // ... 页面滚动时，需要做的事情
}
window.addEventListener("scroll" , pageChange, false);

知识点

1、使用 window.addEventListener 和 document.addEventListener 来处理页面上的事件，区别仅仅在于：不同事件模型上，处理的顺序不一样。

捕获，window 先于 document

冒泡，document 先于 window

2、参数
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false)

1) type: String  事件的类型

2) listener: Function 侦听到事件后处理事件的函数

3) useCapture: Boolean(default = false)
这里牵扯到“事件流”的概念。
侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。
顺序 为：捕获阶段（根节点到子节点检查是否调用了监听函数）→

目标阶段（目标本身）→
           冒泡阶段（目标本身到根节点）。

此处的参数确定侦听器是运行于捕获阶段、 目标阶段还是冒泡阶段。
如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。

要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

4) priority: int (default = 0)
事件侦听器的优先级。
优先级由一个带符号的 32 位整数指定。
数字越大，优先级越高。
优先级为 n 的所有侦听器会在优先级为 n -1 的侦听器之前得到处理。 如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。
默认优先级为 0。

5) useWeakReference:Boolean (default = false) 　　
确定对侦听器的引用是强引用，还是弱引用。
强引用（默认值）可防止您的侦听器被当作垃圾回收。 弱引用则没有此作用。

获取页面滚动高度

代码

function getScrollTop() {
    return window.pageYOffset 
        || document.documentElement.scrollTop  
        || document.body.scrollTop  
        || 0;
}

浏览器兼容性

其中，pageYOffset 属性返回文档在窗口左上角垂直方向滚动的像素

让页面滚动至指定位置

代码

/* 滚动动画
   s: 当前页面滚动高度
   sTop: 指定位置滚动高度
 */
function tabAnimation(s, sTop) {
    var type = s < sTop ? true : false; // true 页面上滑

    var timmer = requestAnimationFrame(function fn() {
        if (type) { s+=50 } 
        else { s-=50 }
        if((type && s > sTop) || (!type && s < sTop)) {
            // $el.scrollTop = sTop;
            window.scrollTo(0, sTop); 
        } else {
            // $el.scrollTop = s;
            window.scrollTo(0, s); 
          timmer = requestAnimationFrame(fn);
        }
    });
}

说明

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次，但大多数浏览器通常匹配 W3C 所建议的刷新频率。

在大多数浏览器里，当运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会暂停调用以提升性能和电池寿命。

原生方法实现 addClass、removeClass 和 hasClass

function hasClass( elements, cName ) { 
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") )
}
function addClass( elements, cName ) { 
  if( !hasClass( elements,cName ) ) { 
    elements.className += " " + cName; 
  }
}
function removeClass( elements, cName ){ 
  if( hasClass( elements,cName ) ){ 
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  }
}

以上就是关于“javascript监听事件之监听页面滚动的示例”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注亿速云行业资讯频道。