轉：天生我才很有用——iscroll的那些事

iscroll是什麼？

iscroll.js是Matteo Spinelli開發的一個js文件，使用原生js編寫，不依賴與任何js框架。旨在解決移動webkit系瀏覽器的區域滾動問題，兼容mobile safari、android默認瀏覽器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心瀏覽器。最新版本爲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://www.wybai.net/?p=273