Iscroll4使用遇到问题探讨

    iscroll4 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，虽然插件不大但是效果十分好。是web app开发必备的控件之一。
iscroll4官网 ： http://cubiq.org/iscroll-4

为什么要用iscroll4
    因为在IOS5之前，web webkit是不支持一种原生方法去滚动固定 长/宽 容器里的内容的。简单的说，就是css属性 overflow:scroll在IOS5 之前是不生效的。
这就像兼容万恶的IE6一样，作者希望通过写一个控件，让所有web浏览器支持这种滚动，于是iscroll4应运而生。

使用iscroll4可能会遇到的问题
    1.在iscroll4的滚动容器范围内，点击input框、select等表单元素时没有响应
这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，解决的方法是，在iscroll4源码里面找到这一行

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

然后把它改成

myScroll = new iScroll('wrapper', { 
		onBeforeScrollStart: function (e) {
			var target = e.target;
			while (target.nodeType != 1) target = target.parentNode;

			if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
				e.preventDefault();
		}
	});

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

    如果你有其他不想被屏蔽的元素，可以自己修改，不过需要注意onBeforeScrollStart里的屏蔽默认事件很重要，它是iscroll进行流畅滚动的基础，不要随便的把它去掉，否则你会发现滚动起来很卡顿。(这个问题大家其实可以直接查看官网的例子就有了cubiq-iscroll-d1e642c\examples\form-fields)

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.左右滚动时，不能正确响应正文上下拉动，以及不能选中文本
在做这种效果时 ，假如这个幻灯片模块只是你页面的一部分，你还需要上下拉动页面去浏览其它内容时，你的手指在这个模块上做上下拨动时，恐怕会没有反应。原因还是和问题1一样的，因为屏蔽了默认事件。
完美的解决方法是没有的，如果把 e.preventDefault() 去掉，幻灯片的滚动效果就会大打折扣，而且有时用户上下拨动的操作会被误操作成幻灯片的滚动。所以在效果还是体验上，大家还是自己选择吧。在技术上解决不了的问题，我认为还是多和产品和UI沟通比较好，共同协商一个良好的方案。