横幅をスマホサイズにしている時に、どこかの画像や要素がはみ出ていて、横スクロールしてしまう時があります。そのため、もし、ドロワーやトップページボタンなどをposition: fixed;にしていた場合、画面から消えてしまい右に寄ってしまっていることがわかります。
それを防ぐためのCSSですが、

html, body {
overflow-x: hidden;
}

HTMLドキュメントの最上位の要素である <html> 要素と、その中に含まれる <body> 要素の両方に対して要素のコンテンツがその要素のボックス内に収まりきらない場合にどう処理するかを指定します。overflow-xは、横方向(X軸方向)についての設定を意味します。hidden: overflow-xhiddenに設定されている場合、コンテンツがボックスの境界を超えると、超えた部分が表示されず、スクロールバーも表示されません。
横スクロールバーを使用しないケースで横スクロールを防ぎたい時に使用してください。

投稿者

Kの手習い

前職はOA機器の販売営業でしたが、退職して、50代で1からプログラマーを目指します。一般的にこの年齢からは厳しいと言われておりますが、この歳ならではの経験を活かして、頑張ります!

コメントを残す