質問: ### 困っていること 自作しているWordPressテーマのデバイスによる表示不具合についての質問です。 これまで、ブラウザ間の表示不具合はあれど、デバイスで表示が大きく変わることはない(小さな変化はあれど)と認識していたのですが、Windowsユーザーの方から「横スクロール」の表示がおかしいとご指摘を受けました。 ### 確認したこと MacでIE含むすべての主要ブラウザでの表示を確認(外部ツール活用)、iPhone・Androidで表示を確認したところ、特に問題はありませんでした。 #### 発生している問題 こちらが正常の横スクロール。 ![正常の横スクロール](https://teratail.storage.googleapis.com/uploads/contributed_images/14c0f017be3151a020a1855968e23576.png) こちらが表示がおかしい横スクロール。(Windowsユーザーから共有されたもの) ![表示がおかしい横スクロール](https://teratail.storage.googleapis.com/uploads/contributed_images/c62193fc9b25f9699d4258e12250745c.jpeg) ※下の画像でメニューの下に無骨なスクロールバーが表示されていますが、これがおかしい表示です。 ### 実装しているコード ~~必要なコードだけ記述します。~~ ID、クラス名、カラー変更のCSSなどを除き、ほぼすべてのコードを記述しました。 どこで不具合が発生しているのでしょうか...? ``` メニュー1 メニュー2 メニュー3 ``` ``` .scroll-wrapper { position: relative; } .scroll { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .scroll-content { display: inline-block; white-space: nowrap; } nav li { list-style-type: none; display: inline-block; } /* ボタンデザインは割愛 */ ``` ※jQueyも割愛 ### 実現したいこと 異なるブラウザ間・デバイス間で同じ表示にしたいのですが、どうすればよいでしょうか? ベンダープレフィックス的なものを付ける必要はありますか?
回答: Windowsのスクロールバーはなかなか厄介なので こんな感じで直らないですかね。 ``` .scroll { overflow: hidden; -webkit-overflow-scrolling: touch; height: 55px; } .scroll-content { overflow-x: scroll; overflow-y: hidden; height: 72px; padding-bottom: 17px; display: inline-block; white-space: nowrap; } ``` 一応参考URL