ios系統微信瀏覽器、safari瀏覽器中h5頁面上拉下滑導致懸浮層脫離窗口的解決方法

一. 運行環境：

iphone所有機型的qq瀏覽器，safari瀏覽器，微信內置瀏覽器（qq瀏覽器內核）等。

二. 異常現象：

1. 大幅度上下滑動h5頁面，然后停止滑動，有時候會影響到頁面滾動，如局部滾動條；

2. 大幅度上下滑動h5頁面，頁面中的懸浮層，如頭部，底部菜單之類需要固定在指定位置的層不會隨着掙個界面滑動；如果對前端的定位方式不太熟練的話，甚至會出現懸浮層的框架與內容相分離的現象。

三. 解決方法：

1.屏蔽滑動手勢——具體解決方法有待探索研究,慎用

直接屏蔽瀏覽器的滑動手勢——干脆直接，省時省力，免除一切ios中部分瀏覽器默認滑動手勢帶來的不正常

示例代碼：

window.addEventListener('touchstart',function(e){e.preventDefault();});
window.addEventListener(‘touchmove’,function(e){e.preventDefault();});

個人感覺如果沒有特殊要求的話，直接使用這種方法就好了，兩行代碼就能免除后患。

注意：這種方法直接屏蔽了頁面的滾動方式，具體解決方法有待探索研究,慎用。

2.動態修改懸浮層定位方式

動態修改懸浮層的定位方式——保留瀏覽器中默認的上拉下滑手勢，又解決了懸浮層脫離整體頁面的問題

示例代碼：

  //angular的寫法，僅供參考
  angular.element(document).on('scroll', function () {
    var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    var window_height = $(window).height() + $(window).scrollTop();
    if (scrollHeight <= window_height) {
      //頁面停止滑動，滾動容器恢復默認定位
      $(ele).css({'position': 'absolute'})
    } else {
      //頁面滾動，滾動容器設置固定定位，隨着微信內置瀏覽器一塊兒滑動
      $(ele).css({'position': 'static'})
    }
  })

 

如果一定要保留瀏覽器默認的滑動手勢的話，那就只能用這種方式了，在滑動頁面的時候，動態將懸浮層的定位方式修改為相對定位，滑動的時候觸發瀏覽器自身的滑動手勢的時候，懸浮層就會相對於整個H5界面定位，這樣就不會出現分離的現象了；

對於習慣了ios上拉下滑整個界面的用戶來說，這種做法的確會好一點，但是需要多所有需要隨着界面整體滑動的懸浮層都有單獨處理，這個就麻煩點了。

3. 合理使用css樣式：

將所有無需固定但是又使用了fixed定位的元素都改為absolute定位，就可以解決問題了，已經證明該方法有效:

position:absolute; 

注意:

1.頁面頂部的元素不要使用固定定位，如頭部導航欄可以改為絕對定位，這樣ios中就不會脫離文檔流了;

2.對於處於屏幕底部展示的一些需要固定位置的元素則可以使用固定定位fixed;

3.在有滾動條的情況下，fixed定位不會隨滾動條移動而移動，而absolute則會隨滾動條移動，所以要保證懸浮層在需要滾動的層的外圍。相對來說，個人感覺還是這種方法比較靠譜。