IScroll的誕生和缺點

轉自http://lhdst-163-com.iteye.com/blog/1239784

iscroll.js是Matteo Spinelli開發的一個js文件，使用原生js編寫，不依賴與任何js框架。旨在解決移動webkit系瀏覽器的區域滾動問題，兼容mobile safari、Android默認瀏覽器、safari、chrome、firefox5+、opera11+、IE9+及其餘webkit核心瀏覽器。最新版本爲iscroll4。 

官方網站：iscroll4 

iscroll的用武之地 

1.區域滾動 

咱們在pc端web開發中，有時會用固定某一區域的寬度和高度，而後使用overflow:auto，使其內容在該區域內滾動。 

iphone默認瀏覽器（mobile safari）也支持固定區域的滾動，但必須雙指滑動操做，並且沒有滾動條。mobile safari中的單指滑動只針對頁面級別，不針對頁面元素。這樣的操做體驗很麻煩，並且不少用戶根本不知道雙指可以區域滑動。 

android自帶瀏覽器也支持區域滾動，且能夠單指滑動操做，可是滑動起來卡的半死半活，很不流暢。 

使用iscroll,能夠完美解決上述問題了，不只能夠在iphone和android上單指滑動，並且滑動起來流暢之極，酣暢淋漓。滑動過程當中也有漂亮的滾動條提示，讓你舒心不已。 

2.固定定位 

固定定位不是iscroll的原生用法，而是使用iscroll協助解決固定定位問題。 

話說iphone很先進，但就是不支持position:fixed。這下苦了咱們了，固定定位怎麼解決啊，咱們會常常遇到固定標題欄、固定工具欄等狀況啊！！ 

使用iscroll協助解決：首先獲取瀏覽器窗口高度；而後獲取固定工具欄的高度；接着將除固定工具欄以外的內容所有放在一個固定區域內，該固定區域的高度=窗口高度-工具欄高度；以後對固定區域使用iscroll。這樣，整個html頁面的高度正好等於窗口高度，頁面級別不會出現滾動，工具欄就一直固定在當前的位置。在固定區域內滑動，能夠查看頁面其餘內容，不會影響工具欄的定位。 


鼠標滾輪滾動 

iscroll支持在pc端瀏覽器中使用鼠標滾輪控制區域滾動，但操做起來很不靈敏。這是因爲iscroll對鼠標滾輪事件作了攔截，而後縮小了滾輪的滾動距離，詳見iscroll4.js源代碼608-609行： 

wheelDeltaX = e.wheelDeltaX / 12;//控制X軸鼠標滾輪速度 
wheelDeltaY = e.wheelDeltaY / 12;//控制Y軸鼠標滾輪速度 
    iscroll將每次的滾輪距離縮小爲系統默認距離的12分之一，難怪滾起來很慢，感受不靈敏。只須要將12改爲1，滾輪的滾動速度就恢復正常了。你也能夠根據實際須要設置成其餘值。 
輸入框聚焦不靈敏、沒法選擇文字 

    使用了iscroll以後，你會發現點擊輸入框時不靈敏，常常沒法聚焦；頁面文字也沒法選擇和複製。這是因爲iscroll要監聽鼠標事件和觸摸事件來進行滾動，因此禁止了瀏覽器的默認行爲，詳見源代碼92行： 
onBeforeScrollStart: function (e) { e.preventDefault(); }, 
iscroll不分青紅皁白，禁止了瀏覽器的一切默認行爲，致使上述問題。因此咱們須要稍做修改： 
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(); 
}, 
    判斷觸發事件的元素是否是input、select、textarea等表單輸入類元素，若是不是就阻止默認行爲。這樣保證了輸入類元素能正確快速聚焦。 
在上述修改中追加一個條件 target.tagName != ‘body’或者直接將onBeforeScrollStart修改成null，便可作到鼠標選取文字，但這樣的修改會致使iscroll滾動失效或不靈敏，因此沒法選取文字這個問題先放一邊吧。如你有更好的方法，歡迎回復。 
select元素操做不靈敏或操做後白屏 

    使用iscroll後，還有一個較麻煩的問題，就是select元素點擊不靈敏（滾動以後點擊select，常常無響應）；有時點擊有反應了，下拉菜單顯示卻錯位（pc端）；選擇一項以後，頁面直接變成了空白（iphone、android中）或者頁面位置向上偏離，滾動區域位置出現偏離。 
    說白了，就是致使select無法用。爲此我調試了好久，最後發現了問題所在：iscroll默認使用的是css的transform變形中的translate3d實現區域滾動，每次滾動實際是改變translate3d中的y軸值，實際的dom位置並無發生變化。translate3d會致使頁面的焦點錯誤，系統級下拉菜單的顯示則會致使其出現顯示偏離。 
    控制滾動模式的代碼在67行：useTransform: true。好在iscroll提供了另外一種滾動方式，基於絕對定位位置變化的滾動。修改成useTransform: false以後，iscroll就會使用對定位位方式來實現滾動，該方式是咱們在web開發中模擬動畫的最經常使用方式，滾動以後dom的實際位置也同步發生了變化，不會出現錯位偏離現象。 
    在pc端主流瀏覽器、iphone、android2.2下測試，select問題完美解決。 
    不過須要注意，使用對position決定定位後，滾動區的寬度默認會自適應內容寬度，而不是父元素的100%，因此最好將滾動區域寬度設爲100%。 
美中不足 

    iscroll是小而精的經典做品，名字也帶着apple範。但惟一美中不足的是，只能使用id調用。

=================================================================================

下面是另外一篇博文，轉自http://blog.chinaunix.net/uid-25820084-id-3524194.html

 

iscroll4 是一款針對web app使用的滾動控件，它能夠模擬原生iOS應用裏的滾動列表操做，雖然插件不大可是效果十分好。是web app開發必備的控件之一。

iscroll4官網 ： http://cubiq.org/iscroll-4

 

爲何要用iscroll4

由於在IOS5以前，web webkit是不支持一種原生方法去滾動固定 長/寬 容器裏的內容的。簡單的說，就是css屬性 overflow:scroll在IOS5 以前是不生效的。

這就像兼容萬惡的IE6同樣，做者但願經過寫一個控件，讓全部web瀏覽器支持這種滾動，因而iscroll4應運而生。

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

1.雙指放大縮小操做

2.下拉刷新/上拉加載更多

3.逐個元素定位的滾動列表

 

使用iscroll4可能會遇到的問題

1.在iscroll4的滾動容器範圍內，點擊input框、select等表單元素時沒有響應

這個問題緣由在於iscroll須要一直監聽用戶的touch操做，以便靈敏的作出對應效果，因此它把其他的默認事件屏蔽了，解決的方法是，在iscroll4源碼裏面找到這一行

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

而後把它改爲

1	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，或許是這兩個屬性在列表長度改變時會影響到渲染，因此致使頁面閃動，解決辦法就是找到源代碼的

1	has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()

改爲

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