モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック

ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール

[coliss]

モーダルが開いている時にページスクロールを防ぐCSSとJavaScriptのテクニック

[benridane111]

もーだるいなー。

[hirorock]

めんどくせー もっと気軽にできたらいいのになぁ‥

[daizo1117]

“も少しリークがあります。具体的には、モーダルが開いていてbodyにfixedが設定されている場合、ページはスクロール位置を失います。そのため、その位置を取得しなければなりません。JavaScriptを少し修正します。 ”

[PerolineLuv]

“ん。”

[perry-tips]

“ビューポートの高さがスクリーンいっぱいであれば、問題にはなりません。”

[chocodoughnut]

この問題、みんな独自の"魔法"を持ってるんだろうなと思う。

[nijitaro]

これも後ろのリンクが触れちゃうから改良が必要

[primedesignworks]

自分用のプラグインを昔作ったので問題ない。モーダルだろうがハンバーガーメニューだろうが、開いたときにページをスクロールはさせず、開いた中身をスクロールさせる。

[ultimatebreak]

iOS Safariのせいでめちゃくちゃ面倒なんだよなこれ。最近はモーダルに限らずハンバーガーメニューや色々な用途で使い回せるようにライブラリ化して使ってる。

[otihateten3510]

わいネイティブだけど。門外漢なのに吐きそう。

[arapro]

🤔

[gla69]

これ、やり始めるとマジで辛いから最近は「勘弁してください」って土下座してる

[rrttaa]

よくやってって言われるけど闇深テクニックだと感じる