iScroll4.2.5中的無法滑動或點擊的解決方案（轉）

又見iScroll問題，特別是三星手機和iPhone，順便提一句，現在的項目中他們給div加了height屬性來解決不能滾動問題，個人認為是個非常愚蠢的解決方案，我必須使用media query來解決隨之而來的不同手機有不同高度問題，既不能適應所有手機，萬一將來有了新手機型號，也會發生問題。不過他們是公司專門雇佣的顧問和專家，我也沒轍。

轉載自： http://www.websqq.org/archives/1524，原文如下

iScroll(注4.2.5版本)框架在部分三星手機上無法滑動或點擊的解決方案

一、測試平台
三星 i9023 android 4.1.2 （正常）
三星 i9250 android 4.2.2 （存在問題）
三星 i9300 android4.1.1 （存在問題）
三星 i9308 android 4.0.4 （存在問題）

二、問題描述
上述手機出現無法滑動或者無法觸發點擊事件的情況

三、問題分析

1、onBeforeScrollStart方法

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

此方法是在_start里進行了調用，目的是為了阻止瀏覽器默認動作的執行，防止在滑動的過程中進行干擾，同時也就阻止了滑動區域里元素的事件的觸發，這種處理方式也直接導致了必須要在_end方法中再次觸發元素的點擊事件

2、_end方法 

if (target.tagName != 'SELECT' && target.tagName != 'INPUT'
&& target.tagName != 'TEXTAREA') {
    ev = document.createEvent('MouseEvents');
    ev.initMouseEvent('click', true, true,
    e.view, 1,point.screenX,
    point.screenY, point.clientX,
    point.clientY,e.ctrlKey,
    e.altKey, e.shiftKey,
    e.metaKey,0, null);
    ev._fake = true;
    target.dispatchEvent(ev);
}

這個處理方式就是順承了上面所提到的阻止了瀏覽器默認行為后，對滑動區域除SELECT、INPUT、TEXTAREA外的元素觸發click事件，已完成對click綁定事件的調用。 

【具體分析】

由於onBeforeScrollStart是在_start方法中進行的調用，e.preventDefault();阻止了元素的默認行為，從而導致了元素綁定事件的失效，必須在_end操作結束后進行綁定事件的模擬調用，原始的iScroll源代碼中在_end中最后創建了click事件的模擬，但是這里必須要清楚的一個原理就是，click其實是要依賴於其他事件的：

1) 普通pc網頁中，click需要依賴於mousedown、mouseup的相繼觸發
2) 移動webkit中，click則需要依賴於touchstart、touchend（實際mousedown,mouseup在移動webkit上也存在）的相繼觸發
“相繼觸發”的意思就是中間不會夾雜有其他的事件類型，這也就很容易理解iScroll中在_end中對模擬事件調用的條件了，必須要判斷that.moved才能直接觸
發模擬事件。

iScroll中與_start、_move、_end相關的三個事件類型是按照如下的規則來設置的：

START_EV = hasTouch ? 'touchstart' : 'mousedown'
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove'
END_EV = hasTouch ? 'touchend' : 'mouseup'

【注意事項】

經測試，三星部分手機里默認瀏覽器里會默認所有元素都有一個默認的click事件（測試結果顯示鼠標事件中默認事件包含mouseup,mousedown,click,dblclick在移動webkit上不支持，為系統放大功能），e.preventDefault時會阻止掉默認click事件的執行，必須要人為的在_end結束之后模擬click事件的調用，而其他正常手機即使調用了e.preventDefault也不會阻止click事件的觸發，因為這些手機的默認瀏覽器上的元素的click事件的cancelable屬性不為true，不可以被preventDefault取消掉，會正常執行，而如果在_end中模擬了click事件則將會導致click的重復調用（在有toggle狀態的事件上非常明顯），因此折中的方式參見下面的解決方案。

四、解決方案

1. 去除onBeforeScrollStart里的阻止默認行為

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

2. onBeforeScrollMove設置為

function (e) {e.preventDefault();}

以保證手機上的正常滑動免受瀏覽器默認行為影響（如下滑時會有窗口的scroll事件），當然如果這里不添加的話也可以在document的END_EV中阻止瀏覽器默認行為
3. _end 中將模擬事件名更改為END_EV或者直接去掉模擬事件的功能 

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調用。
最近做移動平台的應用，使用iscroll使屏幕上下滑動。發現當使用iscroll后，input等不能輸入內容了。只要在iscroll.js文件中加入如下代碼就ok了。

function allowFormsInIscroll(){
    [].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){
    　　el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
       　　 e.stopPropagation();
        })
    })
}
document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);