質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

665閲覧

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

ccmm2

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/05/31 09:00

実現したいこと

プログラム初心者です。
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

同一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

総合スコア69498

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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」を書き換えできていないものがありますよ。(これもエラーが出るのでは?)
guest

0

ベストアンサー

こんな感じで

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>

投稿2023/06/01 01:10

yambejp

総合スコア115275

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問