移动前端滑动插件——JRoll

        不知道是百度搜索的算法更新了还是什么原因，在百度上搜 jroll，搜索结果首页看不到 JRoll 的官网

成都创新互联公司主要从事成都网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务龙湾,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

        也有可能是因为我拒绝了购买百度关键词推广，并且把百度联盟的广告都撤下了，什么原因不管了，

        这里提供一下官网地址：http://www.chjtx.com/JRoll/

—— 2018年12月05日更新

------------------------------------------- 我是分隔线，以下是原文 ----------------------------------------

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

　去年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。我设计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, ...})。

　可选项一览表：

　两个常用方法：refresh和scrollTo。

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

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