【PC】横スクロール可能なボックスを複数並べ、その全てのボックス内においてマウスホイールでの横スクロール操作をしたい

実現したいこと

プログラム初心者です。
HTML、CSS、Javascript（jQuery）を使用し、ECショップを作成しようとしております。
その際、横一列のボックス内に、同一カテゴリの商品を並べ、
PCでサイトを閲覧する際はマウスホイールで横にスクロールして商品が見えるようにしたいと考えています。

プログラムを記載しておきます。どうかご支援のほど宜しくお願いいたします。

発生している問題・エラーメッセージ

横スクロールできるボックスを縦に複数並べたとき、
最上部のボックス（カテゴリ1）ではマウスホイール操作で横にスクロールできるが、
それ以下のボックス（カテゴリ2，3）では、マウスでの横スクロールができない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen and (min-width:768px)">
9    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen and (max-width:767px)">
10    <script src="js/main.js" defer></script>
11<body>
12    <h3 class="item-title">カテゴリ1</h3>
13    <div id="scroll">
14        <div>①</div>
15        <div>❷</div>
16        <div>①</div>
17        <div>❷</div>
18        <div>①</div>
19        <div>❷</div>
20    </div>
21    <h3 class="item-title">カテゴリ2</h3>
22    <div id="scroll">
23        <div>①</div>
24        <div>❷</div>
25        <div>①</div>
26        <div>❷</div>
27        <div>①</div>
28        <div>❷</div>
29    </div>
30    <h3 class="item-title">カテゴリ3</h3>
31    <div id="scroll">
32        <div>①</div>
33        <div>❷</div>
34        <div>①</div>
35        <div>❷</div>
36        <div>①</div>
37        <div>❷</div>
38    </div>
39</body>
40
41</html>

CSS
1#scroll {
2    display: flex;
3    flex-direction: row;
4    height: 100%;
5    width: 300px;
6    overflow-x: auto;
7    -ms-overflow-style: none;
8    scrollbar-width: none;
9  }
10   #scroll::-webkit-scrollbar {
11    background: rgba(0,0,0,0);
12    height: 7px;
13  }
14   #scroll:hover::-webkit-scrollbar {
15    display: block;
16  }
17   #scroll:hover::-webkit-scrollbar {
18    width: 12px;
19  }
20   #scroll:hover::-webkit-scrollbar-track {
21    background: #ffffff;
22    border-radius: 10px;
23  }
24   #scroll:hover::-webkit-scrollbar-thumb {
25    background: #cacaca;
26    border-radius: 10px;
27  }
28   #scroll > div {
29    font-size: 10em;
30    height: 100%;
31    display: flex;
32    align-items: center;
33    line-height: 1;
34    background: #fff;
35  }

JS
1const scrollElement = document.querySelector("#scroll");
2scrollElement.addEventListener("wheel", (e) => {
3    if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
4
5    const maxScrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth;
6
7    if (
8        (scrollElement.scrollLeft <= 0 && e.deltaY < 0) ||
9        (scrollElement.scrollLeft >= maxScrollLeft && e.deltaY > 0)
10    )
11        return;
12
13    e.preventDefault();
14    scrollElement.scrollLeft += e.deltaY;
15});
16

試したこと

document.querySelectorでなく、document.querySelectorAllで取得？
idで複数取得しないといけなのかと考えて試したが、うまく行かなかった。

補足情報（FW/ツールのバージョンなど）

VisualStudioCode、Chrome

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

回答2件

同一HTML上にid="scroll"が複数ありますが、idは重複できません。classとか使いましょう。

また、document.querySelector()はセレクタで指定した最初の要素1つのみを取得するので、それぞれ書くかdocument.querySelectorAll()を使いましょう。

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【querySelectorAll()メソッドで取得してforEach()メソッドで反復処理する | TOMONO Tech-Blog】
https://tech-blog.tomono.jp/archives/2486

投稿2023/05/31 11:00

kei344

総合スコア69608

ccmm2

2023/05/31 14:22

ありがとうございます！ idに関して勘違いしておりました。そこで、各カテゴリにそれぞれidを付与してforで繰り返したところ、思うように動きました。しかし、［Violation] Added non-passive event listener to a scroll-blocking 'wheel' event.の警告文がたくさんでてしまい、この形は正しくないのでしょうか。 ```Javascript for (let i = 1; i < 4; i++) { const scrollElement = document.querySelector("#scroll" + i); scrollElement.addEventListener("wheel", (e) => { if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return; const maxScrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth; if ( (scrollElement.scrollLeft <= 0 && e.deltaY < 0) || (scrollElement.scrollLeft >= maxScrollLeft && e.deltaY > 0) ) return; e.preventDefault(); scrollElement.scrollLeft += e.deltaY; }); }; ``` また、頂いたサイトなどを参照し、共通のクラスを付与してforEachで繰り返しになるよう書いてみたのですが、動かすことができませんでした。もしよろしければ訂正箇所など教えて頂けないでしょうか。 ```Javascript const scrollElement = document.querySelectorAll(".scroll"); scrollElement.forEach(function (element) { element.addEventListener("wheel", (e) => { if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return; const maxScrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth; if ( (scrollElement.scrollLeft <= 0 && e.deltaY < 0) || (scrollElement.scrollLeft >= maxScrollLeft && e.deltaY > 0) ) return; e.preventDefault(); scrollElement.scrollLeft += e.deltaY; }) }); ```

kei344

2023/05/31 16:00

＞［Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. 警告文を読んでみましょう。で、「なんだこれ」となったらその文章ごと検索してみましょう。多くの場合同じ問題に当たった人が解決方法を書いていたりします。＞共通のクラスを付与してforEachで繰り返しになるよう書いてみたのですがせっかくelement.addEventListenerに書き換えたのに、その中の関数で「scrollElement.scrollWidth」など「scrollElement」を書き換えできていないものがありますよ。（これもエラーが出るのでは？）

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

ベストアンサー

こんな感じで

javascript
1<style>
2.scroll {
3    display: flex;
4    flex-direction: row;
5    height: 100%;
6    width: 300px;
7    overflow-x: auto;
8    -ms-overflow-style: none;
9    scrollbar-width: none;
10  }
11.scroll::-webkit-scrollbar {
12    background: rgba(0,0,0,0);
13    height: 7px;
14}
15.scroll:hover::-webkit-scrollbar {
16    display: block;
17}
18.scroll:hover::-webkit-scrollbar {
19    width: 12px;
20}
21.scroll:hover::-webkit-scrollbar-track {
22    background: #ffffff;
23    border-radius: 10px;
24}
25.scroll:hover::-webkit-scrollbar-thumb {
26    background: #cacaca;
27    border-radius: 10px;
28}
29.scroll > div {
30    font-size: 10em;
31    height: 100%;
32    display: flex;
33    align-items: center;
34    line-height: 1;
35    background: #fff;
36}
37</style>
38<script>
39["scroll","wheel","mousewheel","touchmove"].forEach(ev=>document.addEventListener(ev,(e) => {
40  let scrollElement=e.target.closest && e.target.closest('.scroll');
41  if(scrollElement){
42    e.preventDefault();
43    if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
44    const maxScrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth;
45    if (
46      (scrollElement.scrollLeft <= 0 && e.deltaY < 0) ||
47      (scrollElement.scrollLeft >= maxScrollLeft && e.deltaY > 0)
48      )
49      return;
50    scrollElement.scrollLeft += e.deltaY;
51  }
52},{passive:false}));
53</script>
54<h3 class="item-title">カテゴリ1</h3>
55<div class="scroll">
56    <div>1</div>
57    <div>2</div>
58    <div>3</div>
59    <div>4</div>
60    <div>5</div>
61    <div>6</div>
62</div>
63<h3 class="item-title">カテゴリ2</h3>
64<div class="scroll">
65    <div>1</div>
66    <div>2</div>
67    <div>3</div>
68    <div>4</div>
69    <div>5</div>
70    <div>6</div>
71</div>
72<h3 class="item-title">カテゴリ3</h3>
73<div class="scroll">
74    <div>1</div>
75    <div>2</div>
76    <div>3</div>
77    <div>4</div>
78    <div>5</div>
79    <div>6</div>
80</div>