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

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

同事的分享，記錄下來。html

代碼以下：ios

css:web

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

js:app

// 兼容低版本 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:iphone

ModalHelper.afterOpen();

在關閉遮罩層的地方添加以下js：優化

ModalHelper.beforeClose();

這樣，你不再用由於頁面的滑動穿透而煩惱啦~網站

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

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

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(); } }); } } }