【jQuery】IE11でlightboxを使うと、ページ上部に戻ってしまう場合のTips

公開日:2019年11月30日 2021年9月24日更新

Categoryweb制作

久しぶりにlightboxを触った。

頻繁に使っていたのは3年前くらいまでで、それ以降はそもそも画像を大きめに掲載するサイトが増えたり、lightbox系のプラグインも下火気味だったような気もするし、あまり触れる機会が無かった。

今回、久しぶりに触ることとなり、lightboxのバージョンが2.11.1に同梱されているlightbox-plus-jquery.jsと、jQueryはBootstrap4で使われる3.3.1.slim.min.js。

基本的にOKかと思いきや、IE11のみだめだった。モーダルウィンドウが出るときに、謎のページのトップ(上部)へ移動するという問題が発生。画像のところまで戻らないと画像が見られない。ページ下部でギャラリー作るとアウト。画像がページ高さより高ければOKだが、そんな汎用性のない…IEメ…

という事で…

cssで無理矢理解決する

本家のGithubでも議題に上がっているが、いつ解決してくれるか分からないので、とりあえず最低限の解決が出来ればいいや、などと。

概要としては、
・lightboxの画像をクリックして、bodyにクラスを付与
・ギャラリーを閉じる時、bodyからクラスを削除
ページトップへ戻ること自体は直らないが、最低限、画像をその場で確認は出来るから、とりあえずの対応が出来る。

$(function() {
	$("lightboxの画像要素").click(function(){
		$('body').addClass("fixed")
		});
	$(".lightboxOverlay").click(function(){
		$('body').removeClass("fixed")
	});
});

みたいに、lightboxの画像要素をクリックしてbodyにfixedというclass名を付与。
その他の箇所をクリックして、bodyからfixedを削除。

また、cssはこんな感じ。ポジションを固定して、bootstrap用に幅と高さを持たせて、body部分が変にならないようにする。

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}

なお、IE用なので、IE用の書き方でもいいかも。

@media all and (-ms-high-contrast: none){
	body.fixed {
		position: fixed;
		width: 100%;
		height: 100%;
	}
}

ほんとうに…IE…

【追記】
js側にクラス名を足さないと、完ぺきでは無かった。

$(function() {
	$("lightboxの画像要素").click(function(){
		$('body').addClass("fixed")
	});
	$(".lightboxOverlay,.lb-close,.lightbox").click(function(){
		$('body').removeClass("fixed")
	});
});

これでok。