Lightboxでスクロールを出来ないようにしたい

公開日:2023年9月19日 / 最終更新日:2023年9月20日

WebSite

はじめに

「Lightbox」※で画像がポップアップされたあとに画面のスクロールが出来てしまいます。

スクロールが出来ると画像をポップアップとは無関係の操作が出来てしまうのでスクロールが出来ないようにしようと考えました。

そこで実際にJavaScriptで実装してみたので紹介します。

※「Lightbox」の導入に関してはこちらの記事で紹介しています。

以下が「Lightbox」のスクロールをさせないためのコードです。※一部のブラウザは対応していない場合があります。

document.addEventListener(‘DOMContentLoaded’, function () {
const lightboxElements = document.querySelectorAll(‘[data-lightbox]’);
for (var i = 0; i < lightboxElements.length; i++) {
lightboxElements[i].addEventListener(‘click’, function() {
$(‘body’).css(‘overflow’, ‘hidden’);
const overlayElements = document.querySelectorAll(‘.lightboxOverlay, #lightboxOverlay,.lb-close’);
overlayElements.forEach(function(element) {
element.addEventListener(‘click’, function() {
$(‘body’).css(‘overflow’, ”);
});
});
});
}
});

まずはウェブページの読み込みが完了した後に実行させるためのコードです。この中に処理を記述していきます。

Lightboxを使用する画像には'[data-lightbox]’属性を付与しているのでページ内で使用している要素を全て取得しています。

取得した要素全てに対して、どれをクリックしてもbody要素のoverflowをhiddenにするようなイベントリスナーが追加します。

これで画面をスクロール出来ないようにしてます。

画像を閉じたときにまたスクロールが出来るようにしないといけないので閉じるタイミングでbody要素のoverflowを空にします。

まずLightboxで使用されている要素（.lightboxOverlay、#lightboxOverlay、.lb-closeなど）を取得します。

取得した要素全てに対して、どれをクリックしてもbody要素のoverflowを空にするようなイベントリスナーが追加します。

const overlayElements = document.querySelectorAll(‘.lightboxOverlay, #lightboxOverlay,
.lb-close’);
overlayElements.forEach(function(element) {
element.addEventListener(‘click’, function() {
$(‘body’).css(‘overflow’, ”);
});
});

今回は「Lightbox」でポップアップ中にスクロール出来ないような実装を紹介しました。

スクロールは出来ないようにしておいたほうがユーザーにも親切かと思いますので使ってみてください。

もちろんほかにも方法はあると思いますので参考程度にしていただければと思います。

今回は以上です！お疲れ様でした！