はじめに
Webサイトを制作していると、意図せずスクロールができなくなる問題に直面することがあります。本記事では、この問題が発生する原因と具体的な解決策を解説します。
初学者がつまずきやすいポイントから、現役エンジニアが見落としがちな細かい事項まで、特にスマホ環境での問題を詳しく説明していきます。
スクロールできない原因と対策
1. overflow: hidden; が適用されている
CSSの overflow: hidden; は、親要素のサイズを超えたコンテンツを非表示にします。これによりスクロールバーが表示されなくなり、ページがスクロールできなくなることがあります。
スマホ環境での影響
overflow: hidden;をbodyやhtmlに適用すると、特にiOS Safariでスクロールが完全に無効化されることがあります。- モーダルやサイドメニューで
overflow: hidden;を適用後、解除し忘れることが多くあります。
解決策
body {
overflow: auto; /* または visible に変更 */
}
また、JavaScriptでスクロール制御を行う場合は、適切な状態管理が必要です。
function toggleScroll(isDisabled) {
document.body.style.overflow = isDisabled ? 'hidden' : '';
}
2. height: 100vh; による影響
height: 100vh; は、ビューポートの高さと同じ値を要素に設定します。ただし、iOSではアドレスバーやツールバーによってビューポートの高さが動的に変化するため、スクロールができなくなることがあります。
解決策
html, body {
height: auto;
min-height: 100vh;
}
より正確な高さ設定には、以下のようにCSS変数を利用します。
:root {
--vh: 1vh;
}
html, body {
height: calc(var(--vh, 1vh) * 100);
}
JavaScriptで更新することで、動的な高さ変更に対応できます。
function updateVH() {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}
window.addEventListener('resize', updateVH);
updateVH();
3. position: fixed; による影響
ナビゲーションバーやモーダルウィンドウで position: fixed; を使用すると、親要素のスクロールが効かなくなることがあります。
スマホ環境での問題
- iOSでは
position: fixed;がinputフォーカス時に意図せずスクロール位置を変更することがあります。 fixed要素がフルスクリーン表示となり、スクロール可能な領域を覆ってしまうことがあります。
解決策
html, body {
overflow: auto;
position: relative;
}
iOSでの問題を回避するには、transform: translateZ(0); を適用する方法があります。
.fixed-element {
transform: translateZ(0);
}
4. touch-action: none; の影響
touch-action: none; はタッチ操作を無効にするため、誤って適用するとスクロールができなくなります。
スマホ環境での影響
touch-action: none;をbodyやhtmlに適用すると、タッチスクロールが無効化されます。overflow: scroll;が設定された要素にも適用されると、意図せずスクロールができなくなります。
解決策
body {
touch-action: auto;
}
タッチジェスチャーを有効にするには、以下のように設定します。
div.scrollable {
touch-action: pan-y;
}
5. JavaScriptの影響
スクリプトで document.body.style.overflow = 'hidden'; を設定すると、意図せずスクロールが無効になることがあります。
解決策
document.body.style.overflow = '';
または、setTimeout で適切なタイミングでリセットします。
setTimeout(() => {
document.body.style.overflow = 'auto';
}, 300);
まとめ
本記事では、CSSでスクロールができなくなる問題の原因と解決策を解説しました。
ポイントをおさらいすると：
overflow: hidden;の使用に注意height: 100vh;の仕様を理解し、適切な対応策を実装position: fixed;の影響を考慮し、iOS固有の問題に対応touch-actionの適用範囲を適切に設定- JavaScriptによる
overflowの制御に注意
これらを適切に設定することで、スマホ環境でも快適なスクロール体験を実現できます。ぜひ試してみてください！