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

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

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

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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