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

by おっさんず

Web制作をしていると、作成したサイトがスマホで見たときだけ余白ができてしまい、横スクロールバーが表示されたり縦スクロール中に横揺れしてしまうことがありますよね。

Androidは大丈夫なのに、なぜかiPhoneだけそういった状況になってしまうことがあります。

この記事ではスマホでのスクロール時の横揺れをCSSの追記で解決する方法をご紹介します。

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

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

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

Viewportを確認

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

overflow:hiddenを指定してみる

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

HTML


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

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

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

まとめ

上記で紹介したパターンで解決できればうれしいです。

しかし、当然のことながらマークアップのやり方次第で上記が有効でない場合があります
そんな時でも、要素の検証とにらめっこして一つ一つ検証していけば必ず解決可能です。

なかなか直せなくても粘り強く対処しましょう。

関連する記事