摘要：只針對(duì)，因?yàn)榈臅簳r(shí)還不支持，會(huì)自動(dòng)選擇不用。原因還是和問(wèn)題一樣的，因?yàn)槠帘瘟四J(rèn)事件。在技術(shù)上解決不了的問(wèn)題，我認(rèn)為還是多和產(chǎn)品和溝通比較好，共同協(xié)商一個(gè)良好的方案。

1.在iscroll4的滾動(dòng)容器范圍內(nèi)，點(diǎn)擊input框、select等表單元素時(shí)沒有響應(yīng)
這個(gè)問(wèn)題原因在于iscroll需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對(duì)應(yīng)效果，所以它把其余的默認(rèn)事件屏蔽了，解決的方法是，在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時(shí)，它就不會(huì)執(zhí)行e.preventDefault()，默認(rèn)的事件就不會(huì)被屏蔽了。

如果你有其他不想被屏蔽的元素，可以自己修改，不過(guò)需要注意onBeforeScrollStart里的屏蔽默認(rèn)事件很重要，它是iscroll進(jìn)行流暢滾動(dòng)的基礎(chǔ)，不要隨便的把它去掉，否則你會(huì)發(fā)現(xiàn)滾動(dòng)起來(lái)很卡頓。

2.往iscroll容器內(nèi)添加內(nèi)容時(shí)，容器閃動(dòng)的bug

我在做上拉加載更多內(nèi)容的時(shí)候，肯定需要把新的內(nèi)容插入到容器內(nèi)，這時(shí)發(fā)現(xiàn)有時(shí)容器會(huì)出現(xiàn)閃動(dòng)，一開始認(rèn)為是insert進(jìn)去的內(nèi)容太多，后來(lái)又覺得是不是因?yàn)槔锩娌季钟昧薴loat的原因?qū)е轮匦落秩荆詈笸ㄍㄅ懦?/p>

其實(shí)病灶在于iscroll使用了太為先進(jìn)的CSS3屬性，可能web webkit對(duì)這些屬性的支持力度還是不夠好。

涉及的兩個(gè)屬性是 translate3d 和 TransitionTimingFunction，或許是這兩個(gè)屬性在列表長(zhǎng)度改變時(shí)會(huì)影響到渲染，所以導(dǎo)致頁(yè)面閃動(dòng)，解決辦法就是找到源代碼的，

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

改成：

 has3d = false

和在配置iscroll時(shí)，useTransition設(shè)置成false就可以了（useTransition默認(rèn)是false的）。

這樣做有一點(diǎn)瑕疵就是滾動(dòng)起來(lái)和原來(lái)比沒那么流暢了（原來(lái)的效果真的是可以媲美原生app的），但是假如你不對(duì)比的話，是看不出來(lái)了。

在效果和體驗(yàn)上面選擇，我更看重體驗(yàn)。

不過(guò)如果你符合下面的條件，我還是不建議你修改成我這樣：
1)即使你不修改，無(wú)論你怎么往iscroll容器里面插內(nèi)容，它都不會(huì)閃動(dòng)，這種情況大多出現(xiàn)在純文字的列表。假如列表涉及復(fù)雜的布局和圖片，很多時(shí)候會(huì)出現(xiàn)閃動(dòng)bug
2)如果你的web app只是單純?cè)谑謾C(jī)瀏覽器瀏覽。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟，但是在手機(jī)上的safari完全沒有問(wèn)題，所以如果你不是用phonegap之類的框架開發(fā)混合app，你不需要擔(dān)心這個(gè)問(wèn)題。
3)只針對(duì)android，因?yàn)閍ndroid的webkit暫時(shí)還不支持translate3d，iscroll會(huì)自動(dòng)選擇不用。

3.過(guò)長(zhǎng)的滾動(dòng)內(nèi)容，導(dǎo)致卡頓和app直接閃退

說(shuō)白了iscroll都是用js+css3實(shí)現(xiàn)的，對(duì)瀏覽器的消耗肯定是可觀的，避免無(wú)限制的內(nèi)容加載本身就是web產(chǎn)品應(yīng)該避免的。

假如無(wú)可避免，我們可以盡量減低iscroll對(duì)瀏覽器內(nèi)存的消耗

    1)不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時(shí)檢測(cè)容器長(zhǎng)度是否變化來(lái)refresh，但這也意味著你要消耗一個(gè)Interval的內(nèi)存空間

    2)隱藏iscroll滾動(dòng)條，配置時(shí)設(shè)置hScrollbar和vScrollbar為false。

    3)不得已的情況下，去掉各種效果，momentum、useTransform、useTransition都設(shè)置為false

4.左右滾動(dòng)時(shí)，不能正確響應(yīng)正文上下拉動(dòng)

在做這種效果時(shí) ，假如這個(gè)幻燈片模塊只是你頁(yè)面的一部分，你還需要上下拉動(dòng)頁(yè)面去瀏覽其它內(nèi)容時(shí)，你的手指在這個(gè)模塊上做上下?lián)軇?dòng)時(shí)，恐怕會(huì)沒有反應(yīng)。原因還是和問(wèn)題1一樣的，因?yàn)槠帘瘟四J(rèn)事件。

完美的解決方法是沒有的，如果把 e.preventDefault() 去掉，幻燈片的滾動(dòng)效果就會(huì)大打折扣，而且有時(shí)用戶上下?lián)軇?dòng)的操作會(huì)被誤操作成幻燈片的滾動(dòng)。所以在效果還是體驗(yàn)上，大家還是自己選擇吧。在技術(shù)上解決不了的問(wèn)題，我認(rèn)為還是多和產(chǎn)品和UI溝通比較好，共同協(xié)商一個(gè)良好的方案。

基本的心得就是這些拉，希望對(duì)大家有幫助。（轉(zhuǎn)）