iPhoneでポップアップ表示中はスクロールを禁止する

ポップアップを表示している間は、背後にあるコンテンツをスクロールさせないようにしたい場面が多いかと思います。 body と html に overflow: hidden; を指定するという方法では、iPhoneではスクロール出来てしまう問題があります。 また、JavaScriptでスクロールイベントを制御する方法もありますが、ポップアップ内はスクロールできるようにしたい場合、html構造によっては実現できないことがあります。 そこで、body を position: fixed; にすることで対応します。

スクロールを殺すCSS

html.disable-scroll {
  width: 100vw;
  height: 100vh;
}
body.disable-scroll {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
}

スクロールを制御するJS（jQuery）

$(function(){
  var ScrollControl = (function(){
    var scrollPosition = 0; // スクロール位置記録用

    return {
      enable: function() {
        $('body, html').removeClass('disable-scroll');
        $('body').css('top', '');
        $(window).scrollTop(this.getPosition());
      },
      disable: function() {
        this.setPosition();
        $('body, html').addClass('disable-scroll');
        $('body').css('top', -this.getPosition());
      },
      setPosition: function() {
        scrollPosition = $(window).scrollTop();
      },
      getPosition: function() {
        return scrollPosition;
      }
    };
  })();
  $(document).on('click', '.selector', function(){
    // スクロールを殺す
    ScrollControl.disable();
  });
  $(document).on('click', '.selector2', function(){
    // スクロールを活性化
    ScrollControl.enable();
  });
});

position: fixed; にすることで top 位置を明示的に指定する必要があるため、position: fixed; にする前のスクロール位置をtopに指定しています。 position: fixed; から元に戻す際には、スクロール位置を元の位置に戻すために、スクロール位置を明示的に指定しています。