iPhoneのSafariとChromeで縦スクロールした時に横揺れしてしまう時の解決方法

Web制作をしていると、作成したサイトがスマホで見たときだけ余白ができてしまい横スクロールバーが表示されたり、縦スクロール中に横揺れしてしまうことがありますよね。特にAndroidは大丈夫なのに、iPhoneだけそういった状況になってしまうことがあります。この記事ではスマホでのスクロール時の横揺れをCSSの追記で解決する方法をご紹介します。

問題が起きる時の確認事項

iPhoneから見た時にスクロール中に横ブレしてしまう」力作のサイトにクライアントからこんなツッコミが入ってしまったことがある方も多いのではないでしょうか?

開発中、PCのChrome等でスマホ画面のエミュレーションを行ったりAndroidで見た時は問題ないのに、iPhoneだけおかしいことがあります。縦スクロールする際に微妙に指が斜めにいってしまい、その結果横ブレを引き起こしてしまいます

Viewportを確認

そんな時は、まずViewportを確認しましょう。レスポンシブでサイトを制作する際にこちらを書き忘れることはないと思いますが念のため。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

overflow:hiddenを指定してみる

ページを構成している要素を.wrapperや.wrapなどで囲ってoverflow:hidden;をCSSで指定します。

HTML

<body>
    <div class="wrapper"><!-- .wrapperで囲ってみる -->
        <header class="header">
            テキストテキストテキストテキストテキスト.....
        </header>
        <main class="main-content">
            <p>テキストテキストテキストテキストテキスト.....</p>
        </main>
        <footer class="footer">
            テキストテキストテキストテキストテキスト.....
        </footer>
    </div><!-- /.wrapperここまで -->
</body>

CSS

.wrapper { overflow: hidden; }

これでも解決しない場合の最終手段

以下のCSSを追加しましょう。

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

タッチの時に慣性スクロールを有効に設定する設定を追加しました。一件、横ブレと関係なさそうなのですが…私の環境の場合、大抵こちらの方法で解決できました。