【はてなブログ】スマホ版Chromeで閲覧するとスクロールバーが2個表示されてしまう時の対処法
以前、このブログをスマホアプリのクロームで閲覧するとスクロールバーが2重に表示されていたんです。
↑スマホで閲覧するとこんな感じ。ちょっとわかり辛いと思うので、PC版クロームでスマホページを確認した時の画像を載せると、
↑完全にスクロールバーが2個表示されているのが分かります。
ただ単にスクロールバーが2個表示されているだけなら問題ないのですが、スマホで閲覧時にスクロールさせようとすると、画面がロックされている感じになってスクロール出来なかったり、動きがカクカクになってしまうという不具合が発生していました。
一応、他のブラウザアプリでも一通り閲覧してみたんですが、このような現象は起こりませんでした。
何が原因なのか色々調べてみた結果、対処法を見つけることが出来たので書いていこうと思います。
原因を調べてみた
PC版クロームでスマホページを表示して、デベロッパーツール(Ctrl+Shift+i)を表示します。
クロームでのスマホ用ページの閲覧方法は以前記事にしたので参考にしていただけると幸いです。
スクロールバーが2重になっている部分は記事タイトル下の記事本文内だったので、そこら辺の要素を確認してみました。
↑悪さをしている可能性のある要素のチェックマーク部分を一つ一つ外して確認していくと。
「overflow-x:auto;」のチェックを外した時に余分なスクロールバーが見事に消え去った!!
ということで、悪さをしていたのは「.entry-content」内にある「overflow-x:auto;」ということがわかりました。
対処方法
「.entry-content」部分はテンプレートに書いてあるソースなので、直接は変更できない…
ということで、はてなブログ管理ページから「デザイン」→「スマホデザイン」→「ヘッダ」辺りに、
このように書き込んで「変更を保存」。
その後、ブログを確認すると、
スクロールバーを1つにすることに成功。変なロックがかかってしまう現象も解決できました^^
私の中では「overflow-x」って横方向に対するスクロールの制限という認識なので、なぜ縦スクロールに関しての不具合が出たかは良く分かりませんでした(汗。
今後、「overflow」系統の命令には慎重になろうかなと思います。