移动端构建可滑动区块

[YIXUNFE]

移动端构建可滑动区块

在移动设备中，页面中元素的滑动一直是一个困扰人的问题。PC上一个简简单单的overflow: auto便能解决的事情，在移动端却需要各种“花式”解法。

这里我们先简单罗列一下JS和CSS常见解法。

使用iScroll来模拟滑动

iScroll是一款强大的用于移动端滑动效果的插件，很多移动端应用都会用到它来制作滑动效果。它除了具有实现滑动中的回弹、势能、吸附边界、滚动条等效果外，还有实现slide的能力，放大缩小，无限滚动，键盘绑定，滚轮控制等额外功能。iScroll为了使滑动效果更加流畅，会阻止实例化对象中的元素节点上的click事件的默认行为和冒泡，再动态的生成事件对象，触发事件。这种追求完美的解决方案也是令人生畏的地方。抛开一些安卓机型无法阻止默认事件的例外(遇到了也挺烦人的)，iScroll的体积也更适合在混合应用中引用，在流量问题凸显的移动端，似乎我们需要的是一款轻巧的产品。

在iOS中，iScroll表现相当不错，但在安卓机下流畅度一般，主要是因为安卓机在CSS3 transition中使用贝塞尔曲线做扭曲函数表现不佳。

使用overflow:auto达到原生滑动

在移动端的网页中，实现滑动效果变得不再那么困难是在安卓3.x版本也开始支持overflow:auto后，在安卓2.3以及更老版本中，网页对待overflow:auto和overflow:hidden是一样的。而在iOS中，overflow:auto的表现也不理想，一旦手指离开屏幕，滑动元素就不再有任何动作，既没有回弹效果，也没有“惯性”动画效果。只有当我们加上-webkit-overflow-scrolling: touch之后，滑动效果就变得和原生的一样了(iOS下存在不能吸附边界的小遗憾)。

需要注意的是：

• iOS中多个overflow:auto滑块嵌套有严重BUG，测试地址。
• 安卓下滑块没有回弹效果，比较生涩。

虽然使用CSS方式能够使我们简洁高效的开发出一个滑动效果，但是考虑到为了使网页效果更具普遍性、通用性以及能够满足我们更多的交互，我们仍有必要开发一款轻巧的滑动插件以满足我们一些小小的愿望（比如安卓中的回弹效果，iOS下解决吸附边界问题等）。

认识NiceScroller

NiceScroller是一款体积轻巧(gzip开启时2.1K)，功能齐全的插件，能够满足我们对滑动效果的需求。

NiceScroller支持的功能：

• 边界回弹；
• 自动判断滑动方向；
• 势能处理；
• 多滑块嵌套；
• 多种回调事件。

NiceScroller插件的优势是比较明显的，这里介绍一些实现原理：

拖拽处理

在网页中实现拖拽的原理，简述就是在touchstart时记录原点，touchmove时记录当前点，处理元素位移。NiceScroller的拖拽处理也是如此处理：

• 对滑动块绑定touchstart事件，找到当前激活的滑动块；
• document上绑定touchmove,touchend事件；
• touchmove时记录当前点，并移动激活中的滑动块；
• touchend时开始处理势能并重置激活的滑动块为null；

多插件嵌套的功能主要依靠激活滑动块这个过程，获取多个滑动块中最符合实际的一个进行滑动处理即可。

额外需要说明的是，即使实例化了多个NiceScroller对象，document上也仅仅绑定一次事件，在所有滑动块都销毁后将解除绑定。

势能

开启势能配置项的情况下，NiceScroller会模拟原生滚动，实现带有“惯性”的滑动效果。该算法是摘自iScroll中的一个算法，测试下来效果不错。

回调

目前NiceScroller提供了三种回调，分别是触摸开始时的回调，触摸离开时的回调，滑动结束时的回调。

使用体验

在实例化滑块之前，coder可能需要手动的设置一下滑动内容的高宽大小，因为默认情况下子元素可能会换行处理。

NiceScroller以其小巧成为了我们易迅网M站选用的插件，在商详晒单评论中，你将会领略到它的风采。

---

查看NiceScroller

[YIXUNFE]

目前已经支持IE的手势事件，并设置了方向判定。