使用iscroll4可能會遇到的問題(轉：記錄)

http://www.verydemo.com/demo_c104_i43259.html

 

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溝通比較好，共同協商一個良好的方案。

    基本的心得就是這些拉，但願對你們有幫助。（轉）