JavaScriptでスクロールを一時的に止める

JavaScript で何かしらのイベントをきっかけに、一時的にブラウザのスクロールを停止させたい場合の処理方法を調べました。以下のページで紹介してあった方法がかしこい。

JavaScriptで一時的にスクロールを無効化する | monoの開発ブログ
 Lightboxっぽいもののデモ

CSS と jquery の scrollTop(), scrollLeft() で実現

詳しい解説は、上記ページを参考。上下スクロールに加え、左右スクロールが発生する場合に対処するために、scrollLeft の処理を追加しました。

css

body {
  width: 100%;
}

body.noscroll {
  position: fixed;
  overflow-x: scroll;
  overflow-y: scroll;
}

body {

width: 100%;

}

body.noscroll {

position: fixed;

overflow-x: scroll;

overflow-y: scroll;

}

javascript

以下のように、stopScroll(), resumeScroll() 関数を定義して、適宜クリックなどのイベント発生時にこれらを呼び出すように登録。

var scrollTop  = 0;
var scrollLeft = 0;

function stopScroll() {
  scrollTop  = $(window).scrollTop();
  scrollLeft = $(window).scrollLeft();
  $('body').addClass('noscroll').css('top', (-scrollTop) + 'px').css('left', (-scrollLeft) + 'px');
}

function resumeScroll() {
  $('body').removeClass('noscroll');
  $(window).scrollTop(scrollTop);
  $(window).scrollLeft(scrollLeft);
}