完美解決移動端H5頁面的滑動穿透問題

本文轉載自查看原文 2019-01-23 18:27 1972 js類/ css/ 布局

我的個人網站：https://m.theeye.tech/

前端交流群：1056993061

同事的分享，記錄下來。

代碼如下：

css:

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

js:

// 兼容低版本 document.scrollingElement寫法
      (function () {
        if (document.scrollingElement) {
          return;
        }
        var element = null;
        function scrollingElement () {
          if (element) {
            return element;
          } else if (document.body.scrollTop) {
            // speed up if scrollTop > 0
            return (element = document.body);
          }
          var iframe = document.createElement('iframe');
          iframe.style.height = '1px';
          document.documentElement.appendChild(iframe);
          var doc = iframe.contentWindow.document;
          doc.write('<!DOCTYPE html><div style="height:9999em">x</div>');
          doc.close();
          var isCompliant = doc.documentElement.scrollHeight > doc.body.scrollHeight;
          iframe.parentNode.removeChild(iframe);
          return (element = isCompliant ? document.documentElement : document.body);
        }
        Object.defineProperty(document, 'scrollingElement', {
          get: scrollingElement
        });
      })();
      var ModalHelper = (function (bodyCls) {
        var scrollTop;
        return {
          afterOpen: function () {
            scrollTop = document.scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + 'px';
          },
          beforeClose: function () {
            document.body.classList.remove(bodyCls);
            // scrollTop lost after set position:fixed, restore it back.
            document.scrollingElement.scrollTop = scrollTop;
          }
        };
      })('modal-open');

然后在打開遮罩層的地方添加如下js:

ModalHelper.afterOpen();

在關閉遮罩層的地方添加如下js：

ModalHelper.beforeClose();

這樣，你再也不用因為頁面的滑動穿透而煩惱啦~

順便再分享一些關於滾動的優化方法：

1.消除難看的滾動條：在父元素的css添加如下代碼

scrollbar-width: none;
::-webkit-scrollbar {display:none}

2.讓滾動顯得更加流暢：在父元素的css添加如下代碼

overflow-y: scroll;
/* 增加彈性滾動,解決滾動不流暢的問題 */
-webkit-overflow-scrolling: touch;

3.補充:雖說穿透解決了，但是ios手機頻繁滑動后會出現頁面假死的bug，后面使用了以下代碼優化了一下：

iosScrollFix: function (className) {
    var startY, startTopScroll;
    var ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) {
      var temp = document.querySelectorAll(className);
      var tempLen = temp.length;
      for (var i = 0; i < tempLen; ++i) {
        let
          j = i;
        temp[j].addEventListener('touchstart', function (event) {
          startY = event.touches[0].pageY;
          startTopScroll = temp[j].scrollTop;
        }, false);
        temp[i].addEventListener('touchmove', function (event) {
          var startY2 = event.touches[0].pageY;
          if (startTopScroll <= 0 && startY2 - startY > 0) {
            event.preventDefault();
          }
          if (startTopScroll + temp[j].offsetHeight >= temp[j].scrollHeight && startY2 - startY < 0) {
            event.preventDefault();
          }
        });
      }
    }
  }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 解決H5頁面在移動端左右滑動問題：移動端h5頁面touch事件與點擊穿透問題移動端H5頁面慣性滑動監聽移動端h5頁面的那些坑移動端H5頁面遇到的問題總結 H5頁面解決左右滑動問題淺談h5移動端頁面的適配問題淺談h5移動端頁面的適配問題填移動端坑系列一——如何讓h5頁面完美整屏顯示移動端H5頁面的設計稿尺寸大小規范