横幅をスマホサイズにしている時に、どこかの画像や要素がはみ出ていて、横スクロールしてしまう時があります。そのため、もし、ドロワーやトップページボタンなどをposition: fixed;にしていた場合、画面から消えてしまい右に寄ってしまっていることがわかります。
それを防ぐためのCSSですが、
html, body {
overflow-x: hidden;
}
HTMLドキュメントの最上位の要素である <html>
要素と、その中に含まれる <body>
要素の両方に対して要素のコンテンツがその要素のボックス内に収まりきらない場合にどう処理するかを指定します。overflow-x
は、横方向(X軸方向)についての設定を意味します。hidden
: overflow-x
がhidden
に設定されている場合、コンテンツがボックスの境界を超えると、超えた部分が表示されず、スクロールバーも表示されません。
横スクロールバーを使用しないケースで横スクロールを防ぎたい時に使用してください。