このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

jQueryMobile:PCで見ると謎の2本目のスクロールバーが出る

このエントリーをはてなブックマークに追加
操作画面


こんにちは、さち です。

jQuery Mobile で作ったサイトを PC の Chrome で表示すると
謎の2本目のスクロールバーが表示される現象にあいました。

今回は、その解決方法について書いていきます。
完全に需要無視のほぼ自分専用備忘録です。
本当にありがとうございました。




Chrome で出る謎の2本目のスクロールバー

  1. iPhone の Safari で「スクフェスツールズ」を表示した状態。
    スクロールバーは一本だけです。
    操作画面

  2. 今度は、PC の Firefox で表示した状態。
    こちらもスクロールバーは一本だけ。
    操作画面

  3. しかし、PC の Chorme で表示をすると
    なぜか謎の2本目のスクロールバーが出てくる…。
    操作画面

Internet Explorer でも調査してみると
同様に2本目のスクロールバーが出る現象を確認。

余分なスクロールバーが出るだけでサイトは普通に使えるし
元々がスマホ用サイトということで
スマホでの使用に問題がないなら放置でもいいかな。

…と思ったのだけど
PC でアクセスしてくれる人も意外といるので直します。




原因は「overflow-x」

  1. Chrome の「デベロッパーツール(Ctrl + Shift + I)」を使って
    スクロールバーが表示されている要素を選択。
    操作画面

  2. 「overflow-x: hidden;」が怪しい。
    操作画面

  3. 試しに、チェックを外して無効化してみると…
    操作画面

  4. 無事、スクロールバーが1本になりました。
    操作画面

  5. ということで、jQuery Mobile の CSS を上書きして修正完了。
    操作画面

以前、「overflow-x」は IE の 独自CSS だったのに
いつの間にか CSS3 に組み込まれていたんですね。
どうりで Chrome でも「overflow-x」が表示されるわけです。

でも、「overflow-x」は横方向のはみ出しについての設定。
しかも、「hidden」だから隠れるだけのはず。
どうして縦方向のスクロールバーが出てしまったのだろう?
よく分からない…。

最新の jQuery Mobile だとこの現象は出ないのかも。



このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。
感謝!
この状況にハマりました
需要無視だなんてとんでもない
記事掲載感謝です
jQuery思いもよらない影響があって難儀します

ありがとうございました。
osamushi | 2017/10/21/Sat [EDIT]



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ