横スクロールサイトのアコーディオンについて

実現したいこと

HTMLにて、横スクロールで閲覧するWEBサイトを制作しています。
クリックしたら間にテキストが表示されるようにしたいです。
（例えばTEST.02をクリックしたとき、TEST.02とTEST.03の間が開いてTEST.02についてのテキストが表示されるような感じです。）

発生している問題・分からないこと

クリックして横に開くアコーディオンはできましたが、
・アコーディオンを開いているとき、スクロールが出来なくなることと、
・sectionのwidthは150vwに変更しているのに見えなくなっています。(3つ目のピンク背景のsectionにかぶっている？)

しっかり見えるようにしたい事と、アコーディオンを開いた状態でもスクロールができること、
あとは開いたアコーディオンを閉じてからでないと別のアコーディオンが開けないようになっているため、スムーズに開けるようにしたいです。

改変を重ねた結果よく分からなくなってきたのでご助力をお願い致します。

※2560×1440で制作中のため、それ以下ですとテキスト等崩れている可能性があります。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title></title>
7  <link rel="stylesheet" href="css/destyle.css">
8  <link rel="stylesheet" type="text/css" href="css/style.css">
9  <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
10</head>
11<body>
12  <main class="scroll-container" id="scrollContainer">
13    <section id="test01" class="section section-white">
14      <h1>VRが入ります。</h1>
15    </section>
16    <section id="flow02" class="section section-orange">
17      <div class="page-grid">
18        <div class="flow">
19          <span>TEST.02</span>
20          <h3 class="tate">テキストが入ります。</h3>
21        </div>
22        <div class="flow">
23          <span>TEST.03</span>
24          <h3 class="tate">テキストが入ります。</h3>
25        </div>
26        <div class="flow">
27          <span>TEST.04</span>
28          <h3 class="tate">テキストが入ります。</h3>
29        </div>
30        <div class="flow">
31          <span>TEST.05</span>
32          <h3 class="tate">テキストが入ります。</h3>
33        </div>
34      </div>
35    </section>
36    <section id="test03" class="section section-pink">
37    </section>
38  </main>
39  <script type="text/javascript" src="js/javascript.js"></script>
40</body>
41</html>

CSS
1@charset "utf-8";
2
3@font-face {
4  font-family: NotoSerifJP;
5  src: url("../font/NotoSansJP-VariableFont_wght.ttf");
6}
7
8html, body {
9  margin: 0;
10  padding: 0;
11  height: 100%;
12  overflow: hidden;
13}
14html{
15  font-size: 62.5%;/* -> 10px(10pt)*/
16  /*16px -> 1.6rem
17    31px -> 3.2rem*/
18}
19
20body{
21  box-sizing:border-box;
22  /*font-family:NotoSerifJP,,serif;*/
23  font-family: "Kozuka Gothic Pr6N",NotoSerifJP,serif;
24  color: #fff;
25  
26}
27img{
28  width: 100%;
29}
30
31
32.scroll-container {
33  display: flex;
34  flex-direction: row;
35  height: 100vh;
36  overflow-x: auto;
37  overflow-y: hidden;
38}
39.section {
40  flex: 0 0 100vw;
41  height: 100vh;
42  display: flex;
43  align-items: center;
44  justify-content: center;
45  padding: 40px;
46  box-sizing: border-box;
47  position: relative;
48}
49
50.page-grid{
51  width: 100%;
52  display: grid;
53  grid-template-columns: 1fr 2fr;
54}
55.flow{
56  display: flex;
57  flex-direction: column;
58  justify-content: center;
59  padding: 0 5rem;
60  position: relative;
61  background: url("../img/flow02.webp") no-repeat center/cover;
62  z-index: 0;
63  height: 100vh;
64}
65.section.section-orange {
66  background-color: #ffb133;
67  padding: 0;
68} 
69.section.section-orange .page-grid {
70  display: flex;
71  width: auto;
72  height: 100%;
73}
74.section.section-orange .flow {
75  align-items: center;
76  position: relative;
77  flex: 0 0 25vw; 
78  height: 100vh;
79  transition: flex-basis 0.5s ease-out; 
80  overflow: hidden;
81  cursor: pointer;
82  box-sizing: border-box;
83  background: url("../img/flow02.webp") no-repeat center/cover; /* デフォルトの背景 */
84}
85.section.section-orange .flow.active {/
86  background: none;
87}
88.accordion-detail {
89  flex: 0 0 0vw;
90  height: 100vh;
91  background-color: rgba(0, 0, 0, 0.7);
92  color: #fff;
93  padding: 0;
94  box-sizing: border-box;
95  overflow: hidden;
96  display: flex;
97  align-items: center;
98  justify-content: center;
99  font-size: 3rem;
100  transition: flex-basis 0.5s ease-out, padding 0.5s ease-out; /* 幅とパディングにアニメーション */
101  white-space: nowrap;
102}
103
104.accordion-detail.active {
105  flex: 0 0 50vw;
106  padding: 20px;
107}
108.section.section-orange .flow span{
109  font-size: 4rem;
110  position: absolute;
111  top: 12%;
112  left: 50%;
113  transform: translateX(-50%);
114}
115.tate{
116  writing-mode: vertical-rl;
117  -webkit-writing-mode: vertical-rl;
118  -moz-writing-mode: vertical-rl;
119  -ms-writing-mode: tb-rl;
120  -ms-writing-mode: vertical-rl;
121  text-orientation: mixed;
122  font-size: 4rem;
123}
124.section.section-pink{
125  background-color: #ff6ce3;
126}
127
128

JavaScript
1
2// ==============================
3// ページャー (ホイールスクロール)
4// ------------------------------
5const container = document.getElementById("scrollContainer");
6let velocity = 0;
7let rafId;
8
9window.isAccordionOpen = false;
10
11window.addEventListener("wheel", function(e) {
12  if (window.isAccordionOpen) {
13    e.preventDefault();
14    return;
15  }
16
17  e.preventDefault();
18  velocity += e.deltaY * 0.2;
19  if (!rafId) animateScroll();
20}, { passive: false });
21
22function animateScroll() {
23  container.scrollLeft += velocity;
24  velocity *= 0.9;
25
26  if (Math.abs(velocity) > 0.5) {
27    rafId = requestAnimationFrame(animateScroll);
28  } else {
29    rafId = null;
30    velocity = 0;
31  }
32}
33
34
35// ==============================
36// アコーディオン
37// ------------------------------
38$(document).ready(function() {
39  const accordionContentHTML = '<div class="accordion-detail"><p>テキストが入ります。</p></div>';
40  let $currentAccordionDetail = null; 
41
42  $('.section.section-orange .flow').on('click', function() {
43    const $sectionOrange = $('#flow02');
44    const $clickedFlow = $(this);
45
46    if ($currentAccordionDetail && $currentAccordionDetail.length > 0) {
47      $currentAccordionDetail.removeClass('active');
48      $currentAccordionDetail.one('transitionend', function() {
49        $(this).remove();
50      });
51      $currentAccordionDetail = null;
52      $sectionOrange.css('width', '100vw');
53      $('.section.section-orange .flow').removeClass('active');
54      window.isAccordionOpen = false;
55
56      const targetScrollLeft = $sectionOrange.offset().left + container.scrollLeft;
57      $('#scrollContainer').animate({
58          scrollLeft: targetScrollLeft
59      }, 500);
60
61      return;
62    }
63
64
65    $('.section.section-orange .flow').removeClass('active');
66
67    $clickedFlow.addClass('active');
68
69
70    const $newAccordionDetail = $(accordionContentHTML);
71
72    
73    $clickedFlow.after($newAccordionDetail);
74    $currentAccordionDetail = $newAccordionDetail;
75
76    
77    $sectionOrange.css('width', '150vw');
78
79    
80    setTimeout(() => {
81      $newAccordionDetail.addClass('active');
82    }, 10);
83
84    window.isAccordionOpen = true;
85
86    const scrollLeftTo = $clickedFlow.offset().left + container.scrollLeft;
87    $('#scrollContainer').animate({
88      scrollLeft: scrollLeftTo
89    }, 500);
90  });
91});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

検索をいくつかしましたが、同様の横開きのアコーディオンが見つからず、どうすればいいかわからなくなってしまいました...。

補足

特になし

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

回答1件

ベストアンサー

アコーディオンを開いているとき、スクロールが出来なくなることと、

javascript
1window.addEventListener("wheel", function(e) {
2  if (window.isAccordionOpen) {
3    e.preventDefault();
4    //return; /*コメントアウト*/
5  }

wheelイベント処理ないでreturnしている行をコメントアウトすればwheelが効かなくなることは解消できると思います。

投稿2025/07/22 13:42

yambejp

総合スコア118024

keel

2025/07/23 01:39

ご回答ありがとうございます。おかげさまでスクロールは治りました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

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

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

質問する

実現したいこと

発生している問題・分からないこと

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

関連した質問