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則會隨滾動條移動，因此要保證懸浮層在須要滾動的層的外圍。相對來講，我的感受仍是這種方法比較靠譜。