マウスホイールでX軸スクロールしたい

掲題通りなのですが、javascriptで記述したいです。
マジックマウスに慣れ親しみ過ぎたこともあり、抜かってました。

参考サイト：
https://mycus-tom.com/posts/25
https://qiita.com/minebreaker/items/467f6a0df04d9c09d652
これらを見て３時間考えたのですが、頭が働きませんでした。反省してます。
都合上、overflow-xを２回施しており、スクロールが二段になってるのですが容易でしょうか？

HTML
1<div class="slideOver">
2  <div class="outer">
3    <ul class="listHolder">
4      <li class="list1"></li>
5      <li class="list1"></li>
6      <li class="list1"></li>
7      <li class="list1"></li>
8      <li class="list1"></li>
9      <li class="list1"></li>
10      <li class="list1"></li>
11    </ul>
12  </div>
13</div>

css
1.slideOver{
2  overflow-x:auto;
3  background-color:#986876;
4}
5.outer{
6  overflow-x:auto;
7  white-space: nowrap;
8  width:100%;
9  height:20vw;
10  padding-left: 900px;
11  background-color:#609982;
12}
13
14.listHolder{
15  border:1px solid white;
16  display:inline-flex;
17}
18
19.list1{
20  border:1px solid white;
21  width:300px;
22  height:120px;
23  margin-left:-40px;
24  list-style:none;
25  opacity:0.7;
26  background-color:#035300;
27}

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

回答1件

ベストアンサー

こんにちは。

js
1let target = document.querySelectorAll('.outer');
2target.forEach( el => el.addEventListener("wheel", e => {
3    if (e.deltaX === 0) {
4        //e.stopPropagation();
5        e.preventDefault();
6
7        el.scrollBy(e.deltaY, 0)
8    }
9}));