モバイル側スクロールスルーの問題解決

この文書は次のとおりです.https://uedsky.com/2016-06/mobile-modal-scroll/
に質問
周知のように、移動端はfixedマスクバックグラウンドとポップアップレイヤがある場合、スクリーン上でバックグラウンドの下の内容をスライドさせることができ、これは悪名高いスクロールスルー問題である.
前に検索して、次の2つのシナリオを見つけました.
cssのoverflow: hidden

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

ページポップアップレイヤには.modal-openがhtmlに追加され、htmlとbodyのスクロールバーが無効になりますが、このスキームには2つの欠点があります.

htmlとbodyのスクロールバーが無効になっているため、ポップアップレイヤ後のページのスクロール位置が失われ、jsで復元する必要があります.

ページの背景はやはり転がることができる効果があります

jsのtouchmove + preventDefault

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

これによりjsでスクロールを阻止すると効果的に見えますが、ポップアップレイヤにスクロールする必要がある他のコンテンツがない(大きな文字で高さを固定する必要がある場合、スクロールバーを表示してもブロックされる)という欠点もあります.
上の2つの案には欠点があります.今日は英語のキーワードgoogleで見て、もっと良い案があることに気づきました.
ソリューションposition: fixed

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

上のcssだけでは、スクロールバーの位置も失われます.したがって、スクロールバーの位置を維持するためにjsでスクロールバーの位置を保存して閉じる必要がある場合は、スクロール位置を復元します.

/**
  * ModalHelper helpers resolve the modal scrolling issue on mobile devices
  * https://github.com/twbs/bootstrap/issues/15852
  * requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
  */
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');

これで上の3つの欠点が解決し、スクロールスルーで完璧に解決しました.
完全な例
document.scrollingElement
ブラウザの取得と設定に互換性があるため、上記の例を簡略化するために、scrollTopという新しい基準を直接使用し、サポートされていないブラウザに対してpolyfill documentを書きました.scrollingElement.js .
リファレンス

https://github.com/twbs/bootstrap/issues/15852

https://imququ.com/post/document-scrollingelement-in-chrome.html

https://github.com/mathiasbynens/document.scrollingElement

https://segmentfault.com/q/1010000002942948