久以前，手机上的交互依赖键盘和触控笔。我们要查看一个很长很长的列表，必须使用非常难用的触控笔或键盘的上下左右键。后来黑莓发明了滚动球，缓解了大拇指按出茧的问题。

2007年，苹果推出iPhone。iPhone只有一个玻璃屏，没有触控笔，直接用手指操作，支持多手指。Multi-Touch这项技术在推出时被誉为和Mouse（Mac），Click wheel（iPod）一样革命性的发明。当然最近的3D Touch（Apple watch）也是革命性的。在推出iPhone之前，苹果已经做了多年的铺垫。2005年收购的小公司finger works就是专门做手势识别的团队，用macbook的人几乎是脱离鼠标的，因为其触控板非常好用，所用技术来自这家公司。

当时有很多程序猿和产品经理讨论这个技术如何实现。疯狂的Web开发者要在浏览器上实现基于鼠标中键的滚动效果：当很快地滚动中键并停止时，页面由于惯性，会继续往下滚动一段距离才停止。有一个专业名词用来描述，叫Momentum Scrolling。还有人用Web写了示例，用来模拟手指和屏幕交互过程中的数学逻辑，iScroll 和 Scrollability 都是不错的作品。头条的Web图集也有使用Javascript（以下简称JS）实现的惯性滚动代码。下面我们用最简单的Scrollability来讲解，如何实现惯性滚动。

一. 实现滚动

HTML代码：
JS代码：



页面中有四个元素，顶部的黑条，底部的黑条，黑条中的窗口A，以及窗口内一堆英文名列表B（可以想象成办公室的卷帘）。坐标系从窗口A左上角开始，横轴X（右边为正向），纵轴Y（下边为正向）。注意，这里Y轴的方向和数学课本里相反。手指在窗口A上移动，往下移动一段距离，得到的 distanceY > 0。代码由HTML，CSS和JS构成，HTML定义了两个黑条，窗口A和卷帘B。CSS定义了他们的颜色，位置等属性。Javascript则是重点要讲的，它用来控制手指和屏幕的交互。JS中定义了几个功能和变量，其中kBounceLimit这样以k开头的，是数学公式中的固定不变的参数。startX，startY，touchX，touchY用来记录手指位置，touchAnimator是负责操作卷帘B滚动的对象。

这几行代码表示，当用户手指触碰到屏幕时，会执行onTouchStart，去做一些事情。手指在屏幕上移来移去时，会执行onTouchMove。手指离开屏幕的瞬间，硬件会通知程序手指离开，此时执行onTouchEnd。touchstart和touchend都是瞬间事件，从手指按下,移动,抬起的一套过程中只会被通知一次，touchmove是连续触发的，移动1厘米，会收到几十个通知，告诉程序当前手指坐标x,y，时间点。

让卷帘随着手指移动的办法是，在touchstart时，记录手指位置y1；touchmove时根据得到y2，算出当前移动的距离distance＝y2-y1，将卷帘在y轴上移动distance距离; touchmove不断触发，不断执行前面两步，把上一次的touchmove当作起始点，紧接着触发的touchmove当作后来的点，计算distance移动卷帘。

iPhone在处理滚动的过程中，当页面已经到最顶部时，再往下拉会有弹簧效果：手指拉了一个屏幕的距离，内容只移动了半屏。用这样的代码实现其效果：

velocity的含义是：手指在屏幕移动一段距离，触发n个touchmove事件，相邻两个事件的y坐标之差就是velocity（速度）。

打个比方，老李跑步，他的步长就是 velocity。当老李还没跑，想逃出森林公园南门时会有人把他往回拉。Velocity是1米，往回拉的弹性会给velocity打折，身体移动距离可能是0.8米，具体的折扣为：

(1.0 - (position - max) / bounceLimit)*kBounceLimit

position：当前卷帘移动到的位置，（逃出南门的距离）

parentOffsetHeight : 598 窗口A的高度

nodeOffsetHeight : 4602 卷帘B的长度

max：0

min：-4004 （parentOffsetHeight－nodeOffsetHeight，卷帘被挡住的长度，从下往上拉卷帘，最多移动的距离就是min值）

absMin ＝ min

absMax ＝ max

bounceLimit ：窗口高度 parentOffsetHeight＊kBounceLimit

kBounceLimit：0.75

转换后，速度velocity衰减的系数为 0.75 - position/ 598，当position越大，velocity打折越多，越难往下拖动。

二. 惯性和回弹

接着，我们用代码实现自由滚动和下拉时的回弹

在touchend时，加入takeoff()方法





takeoff方法中，根据手指离开屏幕时的velocity计算后面滚动动画的代码：

savekeyframe方法会保存计算出来的每一帧动画，包含位置和时间点。

1. 自由滚动时的状态：
   
   
   
   
   

2. 在顶部回弹时的状态：
   
   
   
   
   
   
   position = easeOutExpo(decelStep, decelOrigin, decelDelta, kBounceTime);
   continues = ++decelStep <= kBounceTime && Math.floor(Math.abs(position)) > max;

   迭代计算position的公式为缓动曲线easeOut，接受的四个参数为：
   decelStep ：初始值为0，每次减速，自增1
   decelOrigin ：decelStep为0时 position值
   decelDelta ：decelStep为0时 max－position
   kBounceTime ：240
   对比linear,ease-in,ease-out和ease-in-out四个曲线，ease-out方程x＝easeOut(t)在一开始有平缓的加速，在时间t到50％时，位置x已经快到达70%，
   在后续50%的时间内减速直到停止。符合我们平时看到的iOS滚动逻辑。
   
   
   
   
   
   
   function easeOutExpo(t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b }
   continues的计算
   

   自由滚动时：continues = Math.floor(Math.abs(velocity)*10) > 0； // Math.abs(velocity) < 0.1

   顶部回弹时：continues = ++decelStep <= kBounceTime && Math.floor(Math.abs(position)) > max; // decelStep<=240加位置约束

   底部回弹时：continues = ++decelStep <= kBounceTime && Math.ceil(position) < min； //同上

3. 底部上拉的状态，同上。

4. saveKeyframe(!continues);
   time += kAnimationStep;
   

   作用是根据diff判断是否保存这个关键帧，最后得到位置和时间的运动轨迹
   
   
   
   
   

5. 根据keyframes得到运动轨迹，再使用实现滚动的代码，让页面运动起来。这里就不展开说明了
   

   
   （gif图略卡，实际效果流畅很多）
   
   
   

三. 浏览器实现

苹果和谷歌在意识到这个需求后，为web开发者提供了原生的支持。

之前需要用iscroll等框架的需求，Chrome浏览器只需 overflow:scroll 一行代码即可。iOS设备需再加一行代码 -webkit-overflow-scrolling: touch;

原生实现的好处是

1. 计算位置的过程要进行大量小数运算，这一点JS非常慢。

2. 惯性滚动是苹果专利，原理涉及数学物理知识很多，远比web开发者模仿出来的要复杂，而且不开源。

3. 如果滚动的内容非常长(手机通讯录，微信朋友圈等)，要做延迟渲染，生成瓦片，贴图，销毁或者回收，内存管理，这些工作必须由系统支持，而不是业务支持。

4. iOS支持Scroll Snapping with CSS Snap Points（点击访问），在滚动结束时对齐到内部元素，只需要两行css代码。

随着手机硬件的发展，浏览器和操作系统在图形渲染，网络API，数据存储等方面的差距越来越小。而且浏览器面向业务，对底层架构的抽象更好，一行css，一个javascript对象可以替代几千行java代码（or 几百行swift代码？）。很多只在操作系统中提供的功能，例如消息推送，也已经在浏览器实现。

Web的开放性让很多公司都对其添砖加瓦。你很难想象微软会往Android仓库中贡献代码，或者谷歌给IE浏览器解决bug，但他们确实都在为HTML5标准做贡献。另一个例子是Adobe，他们希望将Photoshop中的滤镜，图层混合模式等功能提供给web开发者，于是提议做了css filter，css blender。

http://sarasoueidan.com/demos/css-blender/

还有很多简单好玩的东西，以后会在博客中慢慢写。如有描述错误和不当，请批评指正。

作者：王伟

动web滚动问题

在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:

不能实时触发表现：只在手指触摸的屏幕上一直滑动时和滚动停止的那一刻才触发。

关于模拟滚动

概念

正常的滚动：我们平时使用的scroll，包括上面讲的滚动都属于正常滚动，利用浏览器自身提供的滚动条来实现滚动，底层是由浏览器内核控制。

模拟滚动：最典型的例子就是iscroll了，原理一般有两种：

• 监听滚动元素的touchmove事件，当事件触发时修改元素的transform属性来实现元素的位移，让手指离开时触发touchend事件，然后采用requestanimationframe来在一个线型函数下不断的修改元素的transform来实现手指离开时的一段惯性滚动距离。
• 监听滚动元素的touchmove事件，当事件触发时修改元素的transform属性来实现元素的位移，让手指离开时触发touchend事件，然后给元素一个css的animation，并设置好duration和function来实现手指离开时的一段惯性距离。

方案比较

第一种方案由于惯性滚动的时机时由js自己控制所以可以拿到滚动触发阶段的scrolltop值，并且滚动的回调函数onscroll在滚动的阶段都会触发。第二种方案相比第一种要劣势一些，区别在于手指离开时，采用的时css的animation来实现惯性滚动，所以无法直接触发惯性滚动过程中的onscroll事件，只有在animation结束时才可以借助animationend来获取到事件，当然也有一种方法可以实时获取滚动事件，也是借助于requestanimationframe来不断的去读取滚动元素的transform来拿到scrolltop同时触发onscroll回调。

正常滚动和模拟滚动的性能比较

模拟滚动的fps值波动较大，这样滚动起来会有明显的卡顿感觉，各位体验的时候如果滚动超过10屏之后就可以明显感觉到两着的区别。

在使用模拟滚动时，浏览器在js层面会消耗更多的性能去改变dom元素的位置，在dom复杂层级深的页面更为高，所以在长列表滚动时还要使用正常滚动更好。

滚动和下拉刷新

方案1：借助iscroll的原理，整个页面使用模拟滚动，将下拉刷新元素放在顶部，当页面滚动到顶部下拉时，下拉刷新元素随着页面的滚动出现，当手指离开时收回，此方案实现起来较为简单直接借助iscoll即可，但是使用了模拟滚动之后在正常的列表滚动时性能上不如正常滚动。

方案2：页面使用正常滚动，将下拉刷新元素放置在顶部top值为负值（正常情况下不可见），当页面处于顶部时下拉，这时监听touchmove事件，修改scrollcontent的tranlateY值，同时修改下拉刷新元素的tranlateY值，将两者同时位移来将下拉刷新元素显示出来，手指离开时（touchend）收回，这种方案满足了在正常列表滚动时使用原生的滚动节省性能，只在下拉刷新时使用模拟滚动来实现效果。

方案3：方案2的改良版，唯一不同是将下拉刷新元素和scrollcontent放在一个div里，将下拉刷新元素的margintop设为负值，在下拉刷新时，只需要修改scrollcontent一个元素的tranlateY值即可实现下拉，在性能上要比方案2好。

还会有一个性能上的问题就是：当页面的列表过长，dom元素过多时，在模拟滚动，下拉刷新这段时间内，页面也会有卡顿现象，这里采取了一个优化策略即：

• 列表较长时dom数量较多时，在触发下拉刷新的时机时将页面视窗之外的dom元素隐藏或者存放在fragment里面。
• 在刷新完成之后手指离开（touchend）时将隐藏的元素显示出来。
• 需要注意的是，隐藏和显示视窗外的元素这个操作在下拉刷新时只会执行一次，并且只有在下拉刷新时才会执行。

下面介绍如何去优化scroll事件的触发，避免scroll事件过度消耗资源：

防抖（Debouncing）和节流（Throttling）

scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。

特别是针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等）。

防抖（Debouncing）

防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。

节流（Throttling）

防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。这个时候，我们希望即使页面在不断被滚动，但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，就要用到另一种技巧，称为节流函数（throttling）。

节流函数，只允许一个函数在 X 毫秒内执行一次。

与防抖相比，节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。

关于防抖动与节流，我的博客文章也有提及。

使用rAF（requestAnimationFrame）触发滚动事件

如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果，那么可以使用浏览器的原生方法 rAF（requestAnimationFrame）。

window.requestAnimationFrame() 这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数。这个方法接受一个函数为参，该函数会在重绘前调用。

rAF 常用于 web 动画的制作，用于准确控制页面的帧刷新渲染，让动画效果更加流畅，当然它的作用不仅仅局限于动画制作，我们可以利用它的特性将它视为一个定时器。（当然它不是定时器）

通常来说，rAF 被调用的频率是每秒 60 次，也就是 1000/60 ，触发频率大概是 16.7ms 。（当执行复杂操作时，当它发现无法维持 60fps 的频率时，它会把频率降低到 30fps 来保持帧数的稳定。）

var ticking = false; // rAF 触发锁
 
function onScroll(){
 if(!ticking) {
 requestAnimationFrame(realFunc);
 ticking = true;
 }
}
 
function realFunc(){
	// do something...
	console.log("Success");
	ticking = false;
}
// 滚动事件监听
window.addEventListener('scroll', onScroll, false);

实现以16.7ms 触发一次 handler，降低了可控性，但是提升了性能和精确度。

从本质上而言，我们应该尽量去精简 scroll 事件的 handler ，将一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。

避免在scroll 事件中修改样式属性 / 将样式操作从 scroll 事件中剥离

输入事件处理函数，比如 scroll / touch 事件的处理，都会在 requestAnimationFrame 之前被调用执行。

因此，如果你在 scroll 事件的处理函数中做了修改样式属性的操作，那么这些操作会被浏览器暂存起来。然后在调用 requestAnimationFrame 的时候，如果你在一开始做了读取样式属性的操作，那么这将会导致触发浏览器的强制同步布局。

滑动过程中尝试使用 pointer-events: none 禁止鼠标事件

pointer-events 是一个 CSS 属性，可以有多个不同的值,大概的意思就是禁止鼠标行为，应用了该属性后，譬如鼠标点击，hover 等功能都将失效，即是元素不会成为鼠标事件的 target。

pointer-events: none 可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对 body 元素应用 pointer-events: none ，禁用了包括 hover 在内的鼠标事件，从而提高滚动性能。

大概的做法就是在页面滚动的时候, 给 添加上 .disable-hover 样式，那么在滚动停止之前, 所有鼠标事件都将被禁止。当滚动结束之后，再移除该属性。