横スクロールの表示不具合について

困っていること

自作しているWordPressテーマのデバイスによる表示不具合についての質問です。
これまで、ブラウザ間の表示不具合はあれど、デバイスで表示が大きく変わることはない（小さな変化はあれど）と認識していたのですが、Windowsユーザーの方から「横スクロール」の表示がおかしいとご指摘を受けました。

確認したこと

MacでIE含むすべての主要ブラウザでの表示を確認（外部ツール活用）、iPhone・Androidで表示を確認したところ、特に問題はありませんでした。

発生している問題

こちらが正常の横スクロール。

こちらが表示がおかしい横スクロール。（Windowsユーザーから共有されたもの）

※下の画像でメニューの下に無骨なスクロールバーが表示されていますが、これがおかしい表示です。

実装しているコード

~~必要なコードだけ記述します。~~
ID、クラス名、カラー変更のCSSなどを除き、ほぼすべてのコードを記述しました。
どこで不具合が発生しているのでしょうか…？

html
1<nav>
2<div class="scroll-wrapper">
3<div class="scroll">
4<ul class="scroll-content">
5<li><a>メニュー1</a></li>
6<li><a>メニュー2</a></li>
7<li><a>メニュー3</a></li>
8</ul>
9</div>
10<!-- 左のボタン -->
11<a class="leftbutton" href="#"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>
12<!-- 右のボタン -->
13<a class="rightbutton" href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
14</div>
15</nav>

css
1.scroll-wrapper {
2    position: relative;
3}
4.scroll {
5    overflow-x: scroll;
6    overflow-y: hidden;
7    -webkit-overflow-scrolling: touch;
8}
9.scroll-content {
10    display: inline-block;
11    white-space: nowrap;
12}
13nav li {
14    list-style-type: none;
15    display: inline-block;
16}
17/* ボタンデザインは割愛 */

※jQueyも割愛

実現したいこと

異なるブラウザ間・デバイス間で同じ表示にしたいのですが、どうすればよいでしょうか？
ベンダープレフィックス的なものを付ける必要はありますか？

kszk311

2018/03/20 06:30

記載のコードだけでは足りないですね。リスト部分のそのままのHTMLとCSSは最低限ないと答えられないと思います。

chef

2018/03/20 06:44

ご回答ありがとうございます！ということは、このコードだとすべてのデバイス・ブラウザで同じ見た目と動作になるということでしょうか？（他の関係ありそうなコードは後で追加させていただきます）

行動規範の内容に同意します

回答2件

Windowsのスクロールバーはなかなか厄介なので
こんな感じで直らないですかね。

css
1	.scroll {
2		overflow: hidden;
3		-webkit-overflow-scrolling: touch;
4		height: 55px;
5	}
6	.scroll-content {
7		overflow-x: scroll;
8		overflow-y: hidden;
9		height: 72px;
10		padding-bottom: 17px;
11		display: inline-block;
12		white-space: nowrap;
13	}

一応参考URL
https://codepen.io/naru0504/pen/dYpLJg

投稿2018/03/20 07:35

kszk311

総合スコア3404

chef

2018/03/21 01:39

ご回答ありがとうございます！検証するためにParallelsを導入してみたんですが、Windowsだとoverflowプロパティで強制的にスクロールバーが表示されてしまうんですね。恥ずかしながら初めて知りました。いただいた回答ですが、早速試してみました。スクロールバーの高さ分ずらすことで非表示にしていますが、高さが動的に変わる場合の良い解決方法はないでしょうか？ jQueryのプラグインなどでもいいのですが、テーマ側で高さを指定すると、コンテンツ内容によって高さが変わった場合に対処できなくなるためです。ちなみに、こちらのページを参考に検証してみたところ、高さの指定なしでFirefox以外の主要ブラウザでスクロールバーを非表示できました。 https://st40.xyz/one-run/article/105/ 後はFirefox対策だけできればいいのですが、何か良い方法がないか探しています。

行動規範の内容に同意します