web app開發利器 - iscroll4 解決方案

• 存在便是道理,iscroll會誕生,主要是由於不管是在iphone、ipod、android 或是更早前的移動webkit都沒有提供一種原生的方式來支持在一個固定高度的容器內滾動內容,
• 這個不幸的規則致使全部web-app要模擬成app的樣子時，只能由一個絕對定位的header 或是footer再加上一個能夠內容的滾動的中間區域組成。
• 幸運的是移動webkit提供了一種強大的硬件加速的CSS屬性，這個屬性能夠用來模擬這個缺失的功能，Iscroll從這裏開始了前進之路，可是沒有不帶刺的玫瑰。讓內容滾動像原生方式通常比想象中要難
• 兼容萬惡的IE6同樣，做者但願經過寫一個控件，讓全部web瀏覽器支持這種滾動，因而iscroll4應運而生。

在解決了兼容性的問題以外，它還提供了需求許多交互的解決方案，如：

    （1）縮放（Pinch/Zoom）

    （2）拉動刷新（Pull up/down to refresh）

    （3）速度和性能提高

    （4）精確捕捉元素

    （5）自定義滾動條

IOS5 已經可以支持區域滾動了。可是andriod4 仍是不行..

overflow:scroll;  
-webkit-overflow-scrolling:touch;

 

已知的兼容bugs

 

區域滾動：

• 安卓的2x. 元素不支持 overflow:scroll （android自帶瀏覽器） 4.x以上都支持
• ios 5如下好像也不支持

固定定位:

• 話說iphone很先進，但就是不支持position:fixed, 真奇葩

---

實際項目開發中使用iscroll遇到的問題：

大概說下解決的方案,你不必定遇到,遇到了至少有個參考~

• iscroll支持在pc端瀏覽器中使用鼠標滾輪控制區域滾動，但操做起來很不靈敏
• 在iscroll4的滾動容器範圍內，點擊input框、select等表單元素時沒有響應

onBeforeScrollStart : function(e){ e.preventDefault(); },
    這一行，iSroll禁止了事件的默認行爲，致使select，option，textarea等元素沒法點擊。
     解決方法也很簡單，只需作一下判斷，以下：

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()，默認的事件就不會被屏蔽了

 

---

 

• 往iscroll容器內添加內容時，容器閃動的bug                              （實際遇到了,已解決）
• • 作上拉加載更多內容的時候，確定須要把新的內容插入到容器內，這時發現有時容器會出現閃動，一開始認爲是insert進去的內容太多，後來又以爲是否是由於裏面佈局用了float的緣由致使從新渲染，最後統統排除
  • has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
  • has3d = false
  • 和在配置iscroll時，useTransition設置成false就能夠了（useTransition默認是false的）。

 

---

 

 

• 過長的滾動內容，致使卡頓和app直接閃退 （實際遇到了,已解決）
  • 說白了iscroll都是用js+css3實現的，對瀏覽器的消耗確定是可觀的，避免無限制的內容加載自己就是web產品應該避免的。
  • 假如無可避免，咱們能夠儘可能減低iscroll對瀏覽器內存的消耗
  • 1)不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時檢測容器長度是否變化來refresh，但這也意味着你要消耗一個Interval的內存空間
  • 2)隱藏iscroll滾動條，配置時設置hScrollbar和vScrollbar爲false。
  • 3)不得已的狀況下，去掉各類效果，momentum、useTransform、useTransition都設置爲false

 

---

 

在手機中作滑動條,有幾百條下啦列表的是時候，上下滑動爆卡（實際遇到了,已解決）

• 檢查緣由發現跟佈局有很大的關係,佈局的子元素li都用了絕對定位,去掉就OK了,有此可見定位也是會影響能行滴

 

---

 

左右滾動時，不能正確響應正文上下拉動                                  （實際遇到了,已解決）

• 在作這種效果時 ，假如這個幻燈片模塊只是你頁面的一部分，你還須要上下拉動頁面去瀏覽其它內容時，你的手指在這個模塊上作上下撥動時，恐怕會沒有反應。緣由仍是和問題1同樣的，由於屏蔽了默認事件。
• 完美的解決方法是沒有的，若是把 e.preventDefault() 去掉，幻燈片的滾動效果就會大打折扣，並且有時用戶上下撥動的操做會被誤操做成幻燈片的滾動。因此在效果仍是體驗上，你們仍是本身選擇吧。在技術上解決不了的問題，我認爲仍是多和產品和UI溝通比較好，共同協商一個良好的方案。

 

---

 

• 4.1.9版本中,mouseout事件，2次觸發end事件                        （實際遇到了,已解決）

            呵呵，這個我改了源碼，添加了一個flag處理的，具體在

_start 方法中
that.swipe = false;

_mouseout 方法中
        _mouseout:function (e) {
            var t = e.relatedTarget;    

            if(this.swipe){
                return;
            }

 

---

• 4.1.9版本中,preventDefault沒有妥善處理,致使svg不可選的問題 （實際遇到了,已解決）

如圖把  打字累了

 

---

 

附上：運用webkit繪製渲染頁面原理解決iscroll4閃動的問題

 

下章開始源碼分析,敬請期待~~