开发一个fullpage插件遇到的问题

Introduction

这两天在写一个fullpage的插件，参考学习了fullpage.js的代码，有些部分挺精妙。

问题(1) - 要使用滚动条吗?

首先要实现的基本功能就是几个页面，然后滚动到下一个页面。

听起来很简单，但是要以页面转换衔接流畅为目的就要花点功夫了。

第一我们不能用滚动条去做，也不是说不能，只是会遇到几何倍的问题。例如：

1 2	1. 会与滚动条原本事件冲突，要停止事件冒泡。 2. 衔接页面缓动需要另外去写。

而我这里选择操作 transform:translate3d(0,0,0) 来控制整体的滚动。好处在于:

1 2	1. 不会与滚动条冲突，overflow:hidden 了就好。 2. 可以直接只用 CSS3动画(transition: all 1s ease) 来达到目的。

针对transition，我们可以通过监听transitionend 来标记滚动结束。

问题(2) - 停不住的滚动条wheel事件

要控制页面，必然要监听 wheel/onwheel 事件了(兼容性这里暂时不表)。
但是有个问题很严峻，就是滚动是有惯性的，同时它每滚动一次就会触发一次事件。
假如我们用了一个 isMoving 来标记页面是否在动画，第一次监听到滚动事件的时候设为true,在最后监听到 transitionend 来设 isMoving 为 false。看起来很完美，但是问题是页面动画结束以后，滚动未必也已经结束了，可能还在惯性滚动，就是说动画停止了就会触发下一轮的动画，页面就又翻到下一个页面了。

针对这个问题，要从两个方面来判断：

时间差。一般一次滚动操作(包含惯性)在200-300毫秒间就能完成，如果超过这个时间差，则判断为下一次滚动。
加速度。整个滚动事件速度成高斯函数，前面加速，到后面是减速。但是，速度可能有起伏，所以我们需要用中段的平均速度和尾端的平均速度来判断整体趋势是不是在减速，如果在加速的话，就是可以执行我们的页面动画，减速的话就可以跳过了（因为前面必然已经执行过一次了）。

源码

目前在开发中，所以源码暂时不放上来了。