【lightbox】PCビューでのモーダルウィンドウ時にスクロールを止める

lightboxの挙動修正はCSSのみで解決できる

PCでの閲覧時にのみlightboxのモーダルウィンドウ時のスクロールの停止に成功しました。

 

結果として特にJSを書いたりする必要はなくlightbox用のCSSで解決しました。

私がDLしためしたのが2つになります

 

【オンズ 】lightbox 公式サイト　のサイトのjQueryを先に使用してましたが

Lightbox2 公式サイト　こちらのlightbox2ほうが自分の望んでた見せ方に近かったです。

 

lightbox2だと既存でクリックイベントでスクロールの取り外しができました。

ただスマホでの閲覧ではスクロールされてしまうためJSを少し加える必要アリです。

またPCでも画像をクリックしてライトボックスを発動した瞬間にトップ地に自動スクロールされるので、個人的に見ていた画面の場所からスタートさせたかったのでlightbox.cssの一部を変えました。

スクロールの停止方法

 

【PC時のスクロール停止】

 

ligthboxのjQueryによりクリックイベントでマークアップのhtml要素に『.lb-disable-scrolling』というクラス名がつく。

CSSでは初期では position: fixed; が働いているのでこれをコメントアウトにする。

ついたままだとクリックイベントを起こすたびにトップ地に自動スクロールされます。私は見ていた場所から再びスクロール開始がよかったのでこちらの機能は外します。

 

 

なんかもっといろいろめんどくさいのかとJS書きまくったのにこの結果が一番よかったです。

 

スマホ時のスクロールを止める方法

 

スマホだとスクロールされてしまうので、ひとまずマークアップに直書きでモーダル時はスクロールをやめる記述を加えました。

 

 

これだけです。タッチしたままスワイプした時にスクロールを停止してくれます。

 

event.preventDefault();は動作を初期化してくれます。

 

※ただ私の場合なぜかスクロールが残ったままでした

つまり『event.preventDefault();』が効きませんでした…

 

そこで

 

$(window).on(‘touchmove.noScroll’, function(e) {
// スクロールをキャンセル
document.addEventListener(‘touchmove’, function(e) {
event.preventDefault();
}, {
passive: false
});
});

と赤字部分を追加しました。

コピー用

 

これでタッチ後にスクロールはなくなり固定画面になりましたが、そのあとモーダル画面を閉じても固定画面のままなので、スクロールを開始させるための記述がいります。これがなかなかうまくいかず、苦戦中…。

 

.offでやEventListenerのメソッドremoveEventListenerなど実験してみたけど書き方が悪いのかうまくいかず…。

 

ひとまず途中報告(;^_^A