項目分享一：在項目中使用 IScroll 所碰到的那些坑

最近作了個 WEB APP 項目，用到了大名鼎鼎的 IScroll，滾動的效果的確很贊，可是坑也是特別多，下面總結一下，但願自後來者有幫助。

該項目現已開源在 github 上，https://github.com/ansiboy/ChiTuStore

 

1、 使用 absolute 定位

頂欄和底欄最好不要使用 fixed 定位，應該使用 absolute 定位。我最初使用的是 fixed 定位，頁面從右往左呈現的時候，常常會出現兩個問題：一、頂欄時不時地會消失掉，二、新頁面在移動的過程當中，頂欄在第一個頁面頂欄的下方，不是預期中的疊起來。

2、 圖片異步加載

頁面中，若是包含有圖片的，圖片在加載前與加載後，頁面的大小是不一樣的，因爲頁面的大小發生了變化，必須調用 iscroll 的 refresh 方法。但事實，很難知道圖片什麼時候加載完成。必須使用圖片異步加載，待圖片加載完成後，對頁面進行刷新。

我使用的方法是：

使用的是圖片替換的方法。先使用 JS 生成一張圖，這張圖片大小，和實際的圖片大小是一致的，這樣子頁面就不會由於沒有圖片而變小了，也就是說，頁面在圖片載前和加載後的長度都是同樣的。從而解決了由於圖片的異步加載，而致使頁面的大小發生變化，而須要頻繁地刷新的問題。

3、 輸入框鍵盤的彈出

下面兩幅圖，是鍵盤彈出先後的對比圖，要注意的是，頁面和側邊欄的頂欄都不見了，由於這裏的頂欄用的都是 abstract 定位，在彈出鍵盤時，整個 document 對象，會往上移動。所以兩個頂欄都不見了。可是，側邊欄的頂欄，在鍵盤消失的時候，會從新出現，而頁不會。解決方法是在Input 失去焦點的時候，再滾動一下。

        if (site.env.isIOS) {
            var $input = $(this.node).find('input[type="text"]');
            $input.focusout(function () {
                console.log('input focusout');
                $(document).scrollTop(0);
                $(document).scrollLeft(0);
            });
        }

 

 

4、Click或tap事件的屢次點擊

在使用 button 按鈕的時候，click 或 tap 事件會屢次觸發，具體緣由尚不明確。可是，換成了 a 標籤後，貌似沒有出現這個問題了。

5、不要在安卓機上使用

IScroll 在安卓機上使用的效果，並不理想。特別是低版的安卓機，4.0版本。在安卓機上，我使用的都是原生的滾動

小結

總得來講，IScroll 仍是很是不錯的，尤爲是對於 IOS 系統，更是必用不可。