この記事では、スマホでのスクロール時の横揺れをCSSの追記で解決する方法をご紹介します。
Web制作をしていると、作成したサイトがiPhoneで見たときだけ余白ができてしまい、横スクロールバーが表示されたり、縦スクロール中に横揺れしてしまうことがたまにあったります。
特にAndroidでは大丈夫だけど、iPhoneで見た時だけ問題が発生するということになると困ってしまいますよね。しかし、これらの問題はCSSの追記で簡単に解消できる場合があります。
目次
問題が起きる時の確認事項
「iPhoneから見た時にスクロール中に横ブレしてしまう！」力作のサイトにクライアントからこんなツッコミが入ってしまったことがある方も多いのではないでしょうか？
開発中、PCのChrome等でスマホ画面のエミュレーションを行ったりAndroidで見た時は問題ないのに、実機のiPhoneだけおかしいことがあります。
縦スクロールする際に微妙に指が斜めにいってしまい、その結果横ブレを引き起こしてしまいます。
確認点1：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" />確認点2：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
body .wrapper { overflow: hidden; }これらで解決しない場合の最終手段
以下のCSSを追加しましょう。
html {
overflow-x : hidden;
-webkit-overflow-scrolling: touch;
}
body {
overflow-x : hidden;
-webkit-overflow-scrolling: touch;
}タッチの時に慣性スクロールを有効に設定する設定を追加しました。
まとめ
上記で紹介したパターンで解決できればうれしいです。
しかし、当然のことながらマークアップのやり方次第で上記が有効でない場合があります。そんな時でも、要素の検証とにらめっこして一つ一つ検証していけば必ず解決可能です。
なかなか直せなくても粘り強く対処しましょう。
