overflow-x のスクローロバーを消す方法につきまして

Question

overflow-x に auto または scroll を指定した時に表示されるスクロールバーを探しています。macOS の場合は表示されないのですが、Windows だと表示されてしまいます。

現在の状態

Chrome - macOS

Chrome - Windws

コードは以下にあります。

• CodePen のコード

試したこと

いくつか資料に当たっては見たのですが、解消できずにいます。何か思い当たるもの等ございましたら、ご教示いただけると嬉しいです。

• [CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応）
• Hide scroll bar, but while still being able to scroll - Stack Overflow

Answer 1

リンク先の方法を試してみましたが、Windowsのchrome, Firefox, Edge でスクロールバーが非表示になりました。

CodePenサンプル

Chrome - Windows

Comments

[nico25]

かくも初歩的な質問に、動画までつけていただき、ありがとうございます。
無事、問題が解決しました。

Windows 上で Chrome のデベロッパーツールで
擬似要素 `-webkit-scrollbar` を追加しても症状が解決せず困っていました。

正直に申し上げまして CodePen につきまして症状だけを記載し、
CodePen 上での動作を確認できておりませんでした。
お手数おかけして申し訳ございません。

回答をいただき、再度 build しなおしてから
ページを確認したところ症状が改善していることを確認いたしました。

デベロッパーツールでは反応しないもの
Windows
Chrome
Edge

デベロッパツールで反応するもの
Windows
Firefox
IE

デベロッパツールで反映されないというのは初めてだったので、
煮詰まっていました。
ご回答いただき、助かりました。ありがとうございます。