モバイルでのモーダル表示時の背景スクロール禁止処理

以前よりhtml, body への overflow:hidden; はiOS Safari(webkit)では効かないため
主にjQueryで touchmove イベントに preventDefault(); で対応していたが

以前のコード

// スクロール無効
$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});  
// スクロール無効を解除
$(window).off('.noScroll');

iOS 11.3 Safari 11.1 及び Chrome 51 以降は addEventlistner の第3引数に　{ passive: false } を渡して対応する必要がある。

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });

ex

function scroll_control(e) {
    e.preventDefault();
}
function no_scroll(){
    document.addEventListener("touchmove", scroll_control, {passive: false});
}
function return_scroll(){
    document.removeEventListener('touchmove', scroll_control, {passive: false});
}

preventDefault() の付け外しは ex のように関数化しないとうまくいかなかった。
また'passive' オプションに未対応ブラウザのために Polyfill を書く必要がある。

polyfill

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way.
elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false); 

※ elem fn の箇所と { passive: true } を適宜変更して使用

Browser

• webkit
  • https://bugs.webkit.org/show_bug.cgi?id=182521
• chrome
  • https://www.chromestatus.com/features/5745543795965952

対応方法の参考リンク

• スクロール禁止が overflow:hidden や preventDefault(); でできないときの対処法
  • https://qiita.com/shge/items/d2ae44621ce2eec183e6
• マウスによるスクロールやスマホのスワイプを制御するjs(passive: false)
  • http://reiwinn-web.net/2018/05/21/%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%84%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E3%82%92%E5%88%B6/
• Not working with iOS 11.3 Mobile Safari
  • https://github.com/timruffles/mobile-drag-drop/issues/124
• Can't prevent touchmove from scrolling window on iOS
  • https://stackoverflow.com/questions/49500339/cant-prevent-touchmove-from-scrolling-window-on-ios

Passive Event Listenersについての参考リンク

• Passive event listeners
  • https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
• Passive Event Listeners によるスクロールの改善
  • https://blog.jxck.io/entries/2016-06-09/passive-event-listeners.html
• Passive Event Listenersのミニマムpolyfillを書いた。
  • https://qiita.com/rukiadia/items/d2e8d5c45dc2fe299552
• addEventListener の第3引数が拡張されてるという話
  • https://qiita.com/kozy4324/items/85831e2c990d92b8397b