【转】Iscroll4使用心得

最近作web app项目作到心血来潮，有太多经验想记录，太多细节想分享。今日把使用iscroll4 一直困扰了好久的问题研究解决了，很高兴决定把使用的心得写出来，方便你们参考，不要再走太多的弯路。

iscroll4 是一款针对web app使用的滚动控件，它能够模拟原生IOS应用里的滚动列表操做，虽然插件不大可是效果十分好。是web app开发必备的控件之一。

iscroll4官网 ： http://cubiq.org/iscroll-4

为何要用iscroll4

由于在IOS5以前，web webkit是不支持一种原生方法去滚动固定 长/宽 容器里的内容的。简单的说，就是css属性 overflow:scroll在IOS5 以前是不生效的。

这就像兼容万恶的IE6同样，做者但愿经过写一个控件，让全部web浏览器支持这种滚动，因而iscroll4应运而生。

在解决了兼容性的问题以外，它还提供了需求许多交互的解决方案，如：

1.双指放大缩小操做

2.下拉刷新/上拉加载更多

3.逐个元素定位的滚动列表

使用iscroll4可能会遇到的问题

1.在iscroll4的滚动容器范围内，点击input框、select等表单元素时没有响应

这个问题缘由在于iscroll须要一直监听用户的touch操做，以便灵敏的作出对应效果，因此它把其他的默认事件屏蔽了，解决的方法是，在iscroll4源码里面找到这一行

onBeforeScrollStart: function (e) { e.preventDefault(); }

而后把它改为

onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }

这样只要你touch的元素是 select || option || input || textarea时，它就不会执行e.preventDefault()，默认的事件就不会被屏蔽了。

 

若是你有其余不想被屏蔽的元素，能够本身修改，不过须要注意onBeforeScrollStart里的屏蔽默认事件很重要，它是iscroll进行流畅滚动的基础，不要随便的把它去掉，不然你会发现滚动起来很卡顿。

2.往iscroll容器内添加内容时，容器闪动的bug

我在作上拉加载更多内容的时候，确定须要把新的内容插入到容器内，这时发现有时容器会出现闪动，一开始认为是insert进去的内容太多，后来又以为是否是由于里面布局用了float的缘由致使从新渲染，最后统统排除。

其实病灶在于iscroll使用了太为先进的CSS3属性，可能web webkit对这些属性的支持力度仍是不够好。

涉及的两个属性是  translate3d 和 TransitionTimingFunction，或许是这两个属性在列表长度改变时会影响到渲染，因此致使页面闪动，解决办法就是找到源代码的

has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()

改为

has3d = false

和在配置iscroll时，useTransition设置成false就能够了（useTransition默认是false的）。

 

这样作有一点瑕疵就是滚动起来和原来比没那么流畅了（原来的效果然的是能够媲美原生app的），可是假如你不对比的话，是看不出来了。

在效果和体验上面选择，我更看重体验。

不够若是你符合下面的条件，我仍是不建议你修改为我这样

1)即便你不修改，不管你怎么往iscroll容器里面插内容，它都不会闪动，这种状况大多出如今纯文字的列表。假如列表涉及复杂的布局和图片，不少时候会出现闪动bug

2)若是你的web app只是单纯在手机浏览器浏览。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟，可是在手机上的safari彻底没有问题，因此若是你不是用phonegap之类的框架开发混合app，你不须要担忧这个问题。

3)只针对android，由于android的webkit暂时还不支持translate3d，iscroll会自动选择不用。

3.过长的滚动内容，致使卡顿和app直接闪退

说白了iscroll都是用js+css3实现的，对浏览器的消耗确定是可观的，避免无限制的内容加载自己就是web产品应该避免的。

假如无可避免，咱们能够尽可能减低iscroll对浏览器内存的消耗

1)不要使用checkDOMChanges。虽然checkDOMChanges很方便，定时检测容器长度是否变化来refresh，但这也意味着你要消耗一个Interval的内存空间

2)隐藏iscroll滚动条，配置时设置hScrollbar和vScrollbar为false。

3)不得已的状况下，去掉各类效果，momentum、useTransform、useTransition都设置为false

4.左右滚动时，不能正确响应正文上下拉动

在作这种效果时 ，假如这个幻灯片模块只是你页面的一部分，你还须要上下拉动页面去浏览其它内容时，你的手指在这个模块上作上下拨动时，恐怕会没有反应。缘由仍是和问题1同样的，由于屏蔽了默认事件。

完美的解决方法是没有的，若是把 e.preventDefault() 去掉，幻灯片的滚动效果就会大打折扣，并且有时用户上下拨动的操做会被误操做成幻灯片的滚动。因此在效果仍是体验上，你们仍是本身选择吧。在技术上解决不了的问题，我认为仍是多和产品和UI沟通比较好，共同协商一个良好的方案。

基本的心得就是这些拉，但愿对你们有帮助

 

原文连接：http://www.mansonchor.com/blog/blog_detail_64.html