実現したいこと
プログラム初心者です。
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
0 コメント