滚动知识点

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)
这里牵扯到“事件流”的概念。
侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。
顺序 为：捕获阶段（根节点到子节点检查是否调用了监听函数）→code

目标阶段（目标自己）→
            冒泡阶段（目标自己到根节点）。

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

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

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

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);
        }
    });
}