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

スポンサーリンク
スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

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

スポンサーリンク

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

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

css

javascript

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

一応、この方針の実装で動くには動いたのですが、ちょっと条件によっては使いどころが難しそう…。実験したところ、レスポンシブなデザインとの相性が悪いのか、挙動が安定しない現象が発生しました。もう少し調査します。

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!