监听页面滚动相关知识点

监听事件

代码

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

知识点

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

• 捕获，window 先于 document
• 冒泡，document 先于 window

二、参数
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;
}

浏览器兼容性

	谷歌	火狐	IE	360	Microsoft Edge
window.pageYOffset	Yes	Yes	Yes	Yes	Yes
document.documentElement.scrollTop	Yes	Yes	Yes	Yes	No
document.body.scrollTop	No	No	No	No	Yes

其中，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|$)" ), " " );
  }
}