横スクロール機能をもちつつ、横スクロールバーだけを消したい

Question

実現したいこと

横スクロールバーを非表示にしたいのですが
下記前提の上で何は方法はないでしょうか。

前提

• 縦スクロールバーは残す

↓は縦も含めてスクロールバーが消えてしまう
-ms-overflow-style: none;
scrollbar-width: none;
::-webkit-scrollbar{
display:none;
}

• 横スクロールはできる状態にしておく

overflowでのスクロールそのものはできる状態にしたいです。
overflow / overflow-x　　hidden→×

cssのみで難しければ、js / jqueryなどでの解決法も大歓迎です。
調べても「横スクロールだけ」の制御がなかなか方法見当たらず。。
何卒、ご助力いただけると幸いです。宜しくお願いします。

Answer 1

css でスクロールバーを消して、

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

JS でスクロールさせます。

document.addEventListener('wheel', (event) => {
  window.scrollBy({ left: event.deltaX });
});

document.addEventListener('keydown', (event) => {
  let amount;
  if (event.key === 'ArrowLeft')  { amount = -16; }
  if (event.key === 'ArrowRight') { amount = 16; }
  window.scrollBy({ left: amount });
});

Answer 2

とうぜん WebKit と Chromium 限定になりますが、::-webkit-scrollbar:horizontal で制御可能です。

::-webkit-scrollbar {
  background: lightgray;
}
::-webkit-scrollbar:horizontal {
  display: none;
}

注意点としては、::-webkit-scrollbar のルールも書く必要があることです。縦スクロールバーも見た目をカスタマイズする必要があるということになります。