移动前端滑动插件――JRoll

　　又过了一年，终于，第三篇博文要出炉了。

　　去年9月底，结束创业生涯后，我进入了一家外包公司从事移动前端工作，洽洽这年html5火到要爆，而具备html5技能的工程师却千里难觅，虽然我一直从事PC端的工作，但凭借扎实的js基础，也谋了个中级工程师的职位。多学点东西准没错的。

　　从事正规的前端工作后，我接触到了underscore、ratchet、backbone、requirejs、seajs、cordova、angular等等一大堆前端框架工具，不禁感慨，原来我以前的圈子是那么的渺小。iscroll，相信大多数移动前端开发者都用过，在我创业那段时间也接触过，由于当时不会用，搁置了。

　　进入公司后，iscroll便成了不可离开的工具。html5移动应用为了满足业务需求，滑动操作也复杂起来，不再像纯手机网站那样一页下来。而div的overflow:auto属性，在移动设备的表现不太理想，为了解决滑动呆板问题，iscroll似乎成了救星。然而，iscroll并不是万能的，当滑动的元素多起来时，卡顿、闪屏更为严重。为了控制页面元素数量，只好采用增减法，即一次只显示三页，显示第四页时，将第一页删除，始终在屏幕上保持三页的数量，并将位移减去第一页的高度，以保持第二、三页相对屏幕的位置不变。这样一来，iscroll性能方面的缺陷得到了一个比较有效的解决方案。同时，运用空间换性能的方法，将加载过的页面缓存下来，客户体验也是扛扛的。但是，iscroll这就满足了我的需求？如果真是这样的话，就不会有这篇博文了。

　　为了寻找一个更好的滑动插件，去年12月开始研究IScroll5，今年3月开始着手起草JRoll [ jr: ]。我设计jroll的初衷是为解决iscroll的不足，如此一来，我必须先找出iscroll都有哪些缺陷。

　　以下是我感觉iscroll需要改进的地方：

　　1、性能方面，300条数据就会出现卡顿

　　2、scrollFree参数失效。scrollFree为false时，当左右滑动过程中不能进行上下滑动，上下滑动过程中不允许左右滑动。IScroll5出现的bug是当一开始就斜向滑动的话，scrollFree锁定就会失效。

　　3、文件太多，iscroll、iscroll-infinite、iscroll-lite、iscroll-probe、iscroll-zoom共五个文件。iscroll是普通版，含滚动条。iscroll-infinite是无限循环版。iscroll-lite是精简版，无滚动条。iscroll-probe是加强版，可监听滑动并添加滑动事件。iscroll-zoom是缩放版。而且这几个文件是不能同时使用的，否则会发生冲突。

　　4、文件太大，iscroll为了兼容pc，做了很多兼容处理，而且IScroll5里面有很多已经被弃用的代码并没有删除。

　　5、滑动表单时光标丢失

　　好，既然问题已经找出来了，那么该如果解决？即便不能解决所有，也应该做到更好。

　　一、突破性能瓶颈

　　在研究iscroll源码的过程中，发现造成卡顿的主要原因是使用了css3的transition-duration实现惯性滑动。众所周之，css3动画对设备性能要求比较高，在大面积使用时，对GPU来说更是一项极艰巨的挑战。iscroll做得比较好的是，对于不支持transition-duration的手机使用requestAnimationFrame来补救。目前安卓4.1以上都支持transition-duration，但4.1~4.3性能表现不佳。4.2以上支持requestAnimationFrame，对于不支持requestAnimationFrame的手机可以用setTimeout代替。安卓4.2、4.3虽然支持requestAnimationFrame，但其它性能表现与setTimeout无异。值得高兴的是，现在国内所有手机厂商基本上不再生产安卓4.4以下的手机。按现在的手机更替速度来看，一两年后，html5开发者再也不用为兼容安卓低端机而头疼。

　　经过测试，使用requestAnimationFrame实现惯性滑动，能滑起上万条数据，虽然在安卓4.4以下效果会打点折扣，但数据多的时候比起transition-duration强多了，在IOS上表现溜溜的。还是苹果牛逼。

　　权衡取舍，JRoll最终采用requestAnimationFrame来实现惯性滑动。为了降低开发成本及个人精力有限等问题，JRoll只支持webkit和blink内核的浏览器。至于其它内核的浏览器，一来没时间调试，二来穷�潘棵磺�买设备(T_T)。

　　滑动页面的实现原理是在touchmove时移动元素的位置，那到底用absolute好还是用translate好？网上也有不少文章对这两个实现方法的讨论，当然结论也会因系统环境、浏览器内核等因素而异。使用absolute移动位置，可以解决表单丢失光标的问题，但滑动流畅度总是那么的不尽人意。当然在安卓4.1以下系统表现会比translate好些，那此将要被淘汰的系统，我们就不必深究了。使用translate可以开启3D加速，流畅度有了质的提升，只是在软键盘弹出后滑动页面时，某些系统如ios，某些安卓浏览器会出现光标不跟随input输入框的问题，但毕竟这并不影响业务流程的正常操作，况且也很少有人会在软键盘弹出后去滑动页面，因此translate还是比absolute更胜一筹。或许有些同学会问怎样开启3D加速，很简单，要只用到css3任何一个3D属性都会触发硬件加速，例如transform:translateZ(0)。

　　二、解决scrollFree参数失效

　　刚刚又看了一下IScroll5的源码，它的选项参数是freeScroll，我把free和scroll的顺序搞反了，糗大了。本来还想着使用和iscroll一样的API，避免打乱用户习惯，现在JRoll已经上线了，改回来不太好，将错就错吧。iscroll的freeScroll实现方法是先滑动再判断要锁定哪个方向，这种做法导致的问题就是在斜向滑动时判断失效。这里，额外补充一个小知识，preventDefault阻止浏览器默认行为这个属性在滑动过程中才设置是不会生效的。例如，你想在横向滑动时将preventDefault设为true，可以通过e.pageX和e.pageY的差值比较判断正在进行横向滑动还是竖向滑动抑或是斜向滑动，当然一般很少判断斜向滑动，pageX的差值比pageY的差值大时都当作是横向滑动。此时，如果你先竖向滑动，滑动已经开始，然后再横向滑动，preventDefault并不会起作用。jroll修正freeScroll的方法是先判断要锁定哪个方向再执行滑动。简单点说，就是touchmove的第一个移动位置不会使页面滑动，而是用于判断将要进行的方向，第二个移动位置才开始滑动页面。

　　三、去繁从简

　　iscroll将各项功能都拆分成单个文件，每个文件又不能一起使用，在一个项目既用到zoom又用到probe的话确实很让人头疼。jroll使用一个文件实现了滚动条、缩放、事件监听等功能，开发者可不必再为到底使用哪个文件而手足无措。至于无限循环这个功能，将会做成jroll的插件。同时，基于jroll滑动的插件，如日期控件、日历控件、分页等等鄙人也在谋划中，完成之后，html5开发的应用可不必使用input[type=date]来调用原生日期组件，直接调用jroll的日期插件可做到所有移动终端对于日期控件这块体验一致，敬请期待。

　　四、专注移动

　　iscroll为了兼容各种终端，而且升级后废弃的代码也没有删除，因此文件越来越庞大，这并不利用移动应用的开发。jroll一个崭新的产品，没有历史遗留问题，而且专注于移动应用开发，代码相当精简，源文件24k，经过UglifyJS压缩后才12k。当然也使用了mousemove、mousewheel等兼容谷歌浏览器非移动模拟器模式，这也是为了方便开发调试，占用的代码量很少。jroll没有像iscroll那样在touchstart时preventDefault，因此不需要click:true来允许点击a链接。jroll在安卓方面做了自动定位表单的优化，即是点击input时可自动将input定位到可见位置不会被软键盘遮挡，ios会自动定位不需要我们多此一举去优化。

　　好了，说了这么多，让大家一起来领略一下jroll。

　　jroll有五种引入方式：普通引入、CommonJS规范引入、RequireJS规范引入、SeaJS规范引入和强制普通方式引入。

　　使用时也是像iscroll那样new一个。jroll = new JRoll("#wrapper", {bounce:true, zoom:true, ...})。

　　可选项一览表：

可选值	默认值	说明
scroll	true	使能滑动
scrollX	true	使能横向滑动
scrollY	true	使能竖向滑动
scrollFree	false	使能自由滑动，默认情况下，x方向在滑动时，y方向不能滑动，相反亦然，如果应用于对图片进行放大滑动，可将此参数设为true，如果此参数设为true，请务必将bounce设为false，否则将影响滑动效果
zoom	false	使能缩放
zoomMin	1	最小缩放倍数
zoomMax	4	最大缩放倍数
bounce	false	使能回弹
scrollBarX	false	开启x滚动条，若将此参数设为字符串，例scrollBarX:'custom'，可对滚动条样式进行自定义
scrollBarY	false	开启y滚动条，与scrollBarX类似用法
scrollBarFade	false	开启滚动条的渐隐模式
stopPropagation	false	禁止事件冒泡
preventDefault	true	禁止touchmove默认事件，默认为true，当preventDefault为false时有可能触发浏览器自带的左右滑动切换页面功能，而且像QQ手机浏览器(Android4.2)会出现无法滑动的奇葩现象，因此本站不建议将preventDefault设为false。
momentum	true	滚动平滑过渡，如果设为false，手指释放后将马上停止滑动
autoStyle	true	为wrapper 和scroller（wrapper 的第一个子元素）添加样式，默认如果wrapper 的position为static，将被修改成relative，并将overflow设为hidden，scroller 的min-height设为100%
g	0.0008	模拟重力加速度，g值越小，运动时间越长
adjustTop	190	安卓手机输入表单时自动调整输入框位置，默认190，表示输入框距离顶部190px
scroller	wrapper的第一个子元素	指定scroller，不可动态更改，可以是id选择器字符串#scroller，也可以是dom对象document.getElementById('scroller')

　　两个常用方法：refresh和scrollTo。

　　能看到这里，说明你很有毅力，若要更详细的了解jroll，可访问JRoll，现已开源到oschina，源码地址：https://git.oschina.net/chenjianlong/JRoll

　　

　　ps：一眨眼一年过去了，去年给客户做的作品现在已经访问不到了，唉，有时不得不感慨，现在的人肿么都那么浮躁，说好要做品牌的，结果才一年，客户就把网站关掉了。不过请大家放心，jroll是放在我自己的服务器上的，绝对不会那么轻易闭站。只是穷�潘恐宦虻闷鸢⒗镌�550元每年的产品，访问量多了可能会挤爆，没关系，还可以到开源中国去下载源码或在51cto本博客留言问我拿。