-
存在即是道理,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閃動的問題
下章開始源碼分析,敬請期待~~