1 滾動穿透問題

滾動穿透是指在移動端當有 fixed 遮罩背景和彈出層時，在螢幕上滑動能夠滑動背景下面的內容。網上整理了解決方案，但有些還是存在一定的問題：

1.1 設定overflow為hidden

.modal-open {
    &, body {
        overflow: hidden;
        height: 100%
    }
}

即當彈出層彈出時在html上新增.modal-open,禁用 html 和 body 的滾動條,但實際用上就會發現：

由於 html 和 body的滾動條都被禁用，彈出層後頁面的滾動位置會丟失，需要用 js 來計算原來滾動的位置，在彈出時保持滾動位置；
杯具(＞﹏＜)的是頁面的背景還是能夠有滾的動的效果

1.2 js 之 touchmove + preventDefault

modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

即通過阻止移動端touchmove事件，但實際用上會發現彈出層需要滾動時也會被阻止(＞﹏＜)

1.3 最後解決方案：position: fixed

body.modal-open {
    position: fixed;
    width: 100%;
}

這種方式同樣當彈出層彈出時滾動條會丟失，所以還需要使用js來儲存滾動條的位置，在關閉彈出層時將滾動位置還原；

var ModalHelper = (function(bodyCls) {
  var scrollTop; // 在閉包中定義一個用來儲存滾動位置的變數
  return {
    afterOpen: function() { //彈出之後記錄儲存滾動位置，並且給body新增.modal-open
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px'
 
;
    },
    beforeClose: function() { //關閉時將.modal-open移除並還原之前儲存滾動位置
      document.body.classList.remove(bodyCls);
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');

本人親測確實比較完美解決了移動端滾動問題

2 移動端輸入框被鍵盤擋住問題

由於所開發的頁面內嵌在公司的一個APP中，有一個類似聊天視窗的介面，測試的時候發現在部分安卓機中輸入框被完全遮擋住，踩這個坑時在網上找了好多資料，好像都沒有一套完整的解決辦法，先看其中一種解決辦法，可以解決絕大數安卓機上面的問題：

if(/Android/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
       document.activeElement.scrollIntoView();
     }
  })
}

即在安卓機中通過監聽當視窗resize時，判斷當前獲得焦點的元素是否為輸入框，再呼叫該元素的scrollIntoView()，即將該元素展示在當前視窗的可視區域。由於只有scrollIntoView被各瀏覽器均支援，所以這個方法最為常用。
使用這段程式碼之後，在微信或者其他瀏覽器測試時有效果，但因為是需要內嵌在自家APP上，使用這段程式碼一直沒有解決輸入框被擋住的問題，最後測試才發現，APP內建瀏覽器在聚焦輸入框彈出鍵盤根本沒有觸發視窗的resize事件，瞬間心中萬馬奔騰(＞﹏＜)~~~，後面在借鑑了某阿里的一個網頁版的聊天介面，發現它是通過獲取輸入框焦點將輸入框定位到視窗略高於輸入框的位置，在失去焦點鍵盤彈回時再恢復到底部，於是通過這種方式處理，暫時比較暴力的解決了在安卓上該APP上輸入框被擋住的問題，這種方法顯然是不完美的，比如由於無法監聽resize事件，而且使用的鍵盤高度不固定，所以只能大概的將高度設定保持在螢幕一半偏上一點。保證絕大數情況下輸入框在鍵盤之上顯示。

3 IOS滾動不平滑的問題

在移動端特別是iOS中，當滾動螢幕時會發現手指一拿開滾動就停止，這種使用者體驗效果很不好，有種給使用者滾動卡頓的感覺。CSS3中的-webkit-overflow-scrolling屬性可以完美的解決這個問題，該屬性可控制元素在移動裝置上是否使用滾動回彈效果:

auto

使用普通滾動, 當手指從觸控式螢幕上移開，滾動會立即停止。

touch

使用具有回彈效果的滾動, 當手指從觸控式螢幕上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆疊上下文。