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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

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








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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ