スポンサーリンク

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

この記事は約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 だとこの現象は出ないのかも。

コメント

  1. osamushi より:

    この状況にハマりました
    需要無視だなんてとんでもない
    記事掲載感謝です
    jQuery思いもよらない影響があって難儀します

    ありがとうございました。

タイトルとURLをコピーしました