スマホ画面の横揺れ修正

楽天などのモールのheaderを100%にしている店舗から、横スクロールバーが出ると連絡があったので対策方法を紹介します。

基本的な対策方法

まず、HTML要素に対して横スクロールを無効にする方法を試してみましょう。

css

html {
	overflow-x: hidden;
}

縦スクロールも無効にしたい場合

場合によっては、縦スクロールも無効にしたいことがあるかもしれません。その場合は、以下のCSSを使用します。

css

body {
    overflow-y: hidden;
}

追加の対策方法

上記のCSSを追加しても効果がない場合は、以下のように-webkit-overflow-scrollingプロパティを追加してみてください。これにより、モバイルブラウザでのスクロールの滑らかさを制御することができます。

css

html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

補足情報

注意点:

overflow-x: hidden;を使用することで、横スクロールバーが表示されなくなりますが、内容が画面幅を超える場合には見えなくなる可能性があります。
overflow-y: hidden;は縦スクロールも無効にするため、コンテンツが画面に収まりきらない場合には注意が必要です。

最新のブラウザ対応:

上記のコードは主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）で動作しますが、古いバージョンのブラウザではサポートされていない可能性があります。必要に応じてベンダープレフィックスを追加してください。

横スクロールバーが表示される場合

ヘッダーを100%に設定している場合に横スクロールバーが表示される問題を解決するには、overflow-x: hidden;を使用して横スクロールを無効にします。効果がない場合は、-webkit-overflow-scrollingプロパティを追加してモバイルブラウザでの滑らかなスクロールをサポートすることを検討してください。