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

jQuery WEB

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

2018/08/21 2019/07/07

1 lightboxの挙動修正はCSSのみで解決できる
- 1.1 スクロールの停止方法
- 1.2 スマホ時のスクロールを止める方法

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; が働いているのでこれをコメントアウトにする。

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

html.lb-disable-scrolling {
overflow: hidden;
/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
/*position: fixed;*/　←コメントアウト推奨
height: 100vh;
width: 100vw;
}

html.lb-disable-scrolling {

overflow: hidden;

/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */

/*position: fixed;*/　←コメントアウト推奨

height: 100vh;

width: 100vw;

}

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

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

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

$(window).on('touchmove', function(e) {
event.preventDefault();
});

$(window).on('touchmove', function(e) {

event.preventDefault();

});

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

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

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

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

そこで

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

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

コピー用

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