モーダルウィンドウを実装する際、背景スクロールを抑止する一般的な手法はどれですか？
- document.body.style.opacity = 0.5 を設定する
- document.body.style.overflow = “hidden” を開く間だけ付与する
- window.stop() を呼び出す
- 全ての要素に pointer-events: none を付ける
正解
- document.body.style.overflow = “hidden” を開く間だけ付与する
解説
モーダル表示中にbodyへoverflow: hiddenを付けて背景のスクロールを停止し、閉じると解除します。opacityやpointer-eventsではスクロール自体は止まりません。
使用例（サンプルコード）
[ html ]
<button id="open">Open Modal</button>
<div id="backdrop" style="display:none;position:fixed;inset:0;background:#0008;">
<div id="modal" style="margin:10% auto;background:#fff;max-width:400px;padding:16px;">
<p>内容</p><button id="close">Close</button>
</div>
</div>
<script>
const bd = document.getElementById('backdrop');
document.getElementById('open').onclick = () => {
bd.style.display = 'block';
document.body.style.overflow = 'hidden';
};
document.getElementById('close').onclick = () => {
bd.style.display = 'none';
document.body.style.overflow = '';
};
bd.addEventListener('click', e => { if (e.target === bd) document.getElementById('close').click(); });
</script>