背景のスクロールを禁止/解除する

概要

用途・要件

• DEMOではボタンクリックでスクロールの禁止/解除を切り替えています。
• メニューやモーダルを開いている最中は、背景がスクロールできないようにしたい場面などに応用可能。
• bodyにcssのoverflow: ‘hidden’; を指定して対応。
• iOSの場合は上記が効かないため、position: fixed; を指定して対応。
• windows環境でスクロール禁止した際にスクロールバーの幅分、横にカクッとならないように対処。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11
• iOS safari(最新)
• Android OS Google Chrome(最新)

用途・要件

• jQuery v3.6.0使用。

実装