teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問【JavaScript】ポップアップを表示させてる時にスクロール禁止したい

Q&A

解決済

2回答

496閲覧

【JavaScript】ポップアップを表示させてる時にスクロール禁止したい

chibimame
chibimame

総合スコア28

JavaScript

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

0グッド

0クリップ

投稿2022/07/14 02:27

編集2022/07/14 05:19

0

0

いつもお世話になっております。
また一つつまづいたので、質問させてください。

実現したいこと

インフォーメーションを設定しており、クリックした内容をポップアップで表示させています。
その時に、背後をスクロール禁止にしたいです。
class="info-ttl"をクリックしたときに、class="info-content"にクラス名activeが追加で付くように設定しています。

該当のソースコード

html
1<body>
2<dl>
3 <dt>2022.07.14</dt>
4 <dd>
5  <span class="info-ttl">インフォメーションのタイトル</span>
6  <div class="info-content">ポップアップで表示させてる内容</div>
7 </dd>
8 <dt>2022.07.14</dt>
9 <dd>
10  <span class="info-ttl">インフォメーションのタイトル</span>
11  <div class="info-content">ポップアップで表示させてる内容</div>
12 </dd>
13 <dt>2022.07.14</dt>
14 <dd>
15  <span class="info-ttl">インフォメーションのタイトル</span>
16  <div class="info-content">ポップアップで表示させてる内容</div>
17 </dd>
18</dl>
19</body>

試したこと

javascript
1const infoTtl = document.querySelectorAll('.info-ttl');
2const scrollProhabited = document.querySelectorAll('.info-content');
3const scrollProhabitedBody = document.getElementsByTagName('body');
4
5infoTtl.forEach(function (info) {
6 info.addEventListener('click', function () {
7  scrollProhabited.forEach(function (element) {
8   if (element.classList.contains('active')) {
9    scrollProhabitedBody.classList.add('modal-open');
10   } else {
11    scrollProhabitedBody.classList.remove('modal-open');
12   }
13  });
14 });
15});
16

出てるエラー

クリック時にremove部分でエラーが出ます。
Cannot read properties of undefined (reading 'remove')

補足

console.logで確認したところ、そもそもクリック時にelement.classList.contains('active')がtrueになってないようです。

よろしくお願いいたします。

追記

ポップアップの設定は以下のように行っています。

javascript
1/*--Informationのポップアップ--*/
2const popupTtl = document.querySelectorAll('.tinfo-ttl');
3const popupBox = document.querySelectorAll('.info-content);
4const popupCloseBtn = document.querySelectorAll(
5 '.top-info-content-popup-close-btn'
6);
7const popupContentBg = document.querySelectorAll(
8 '.top-info-content-popup-inner-box'
9);
10
11window.addEventListener('DOMContentLoaded', function () {
12 for (let i = 0; i < popupTtl.length; i++) {
13  popupTtl[i].addEventListener('click', function (e) {
14   e.preventDefault();
15   let dataPopupTtl = popupTtl[i].getAttribute('data-popup-ttl');
16   for (let j = 0; j < popupBox.length; j++) {
17    if (popupBox[j].getAttribute('data-popup-cont') === dataPopupTtl) {
18     popupBox[j].classList.add('active');
19    }
20   }
21  });
22  popupContentBg[i].addEventListener('click', function () {
23   popupBox[i].classList.add('active2');
24   setTimeout(function () {
25    popupBox[i].classList.remove('active');
26    popupBox[i].classList.remove('active2');
27   }, 300);
28  });
29  popupCloseBtn[i].addEventListener('click', function () {
30   popupBox[i].classList.add('active2');
31   setTimeout(function () {
32    popupBox[i].classList.remove('active');
33    popupBox[i].classList.remove('active2');
34   }, 300);
35  });
36 }
37});
38
39//Informationポップアップを開いてる時にスクロール禁止
40const scrollProhabitedBody = document.getElementsByTagName('body');
41
42popupTtl.forEach(function (info) {
43 info.addEventListener('click', function () {
44  popupBox.forEach(function (element) {
45   if (element.classList.contains('active')) {
46    scrollProhabitedBody.classList.add('modal-open');
47   } else {
48    scrollProhabitedBody.classList.remove('modal-open');
49   }
50  });
51 });
52});
53

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

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

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

Matsumon0104
Matsumon0104

2022/07/14 04:06

>該当箇所をクリックしたときに、classにactiveが付くように設定しています。 クリックしたときに「active」を付与している部分のソースを掲載していただくと、有用な回答が得られるかと思います。
chibimame
chibimame

2022/07/14 04:16

>Matsumon0104 ありがとうございます！ 該当ソースコード内のclass="info-ttl"をクリックしたときに、class="info-content"にクラス名activeが追加で付くように設定しています。 修正しましたので、ご確認いただけますと幸いです。
Matsumon0104
Matsumon0104

2022/07/14 04:28

ご掲載いただいているソース部分には、「add」を利用してクラス名に「active」を追加してる部分は無いかと思うのですが、別の部分で実装していますか？ それとも、何かjsのフレームワークやライブラリを利用していますか？
chibimame
chibimame

2022/07/14 04:33

>Matsumon0104 activeをつける動作については、別の部分でJSで実装済みです！ フレームワークなどは利用せず、Pure JSで実装しています。
Matsumon0104
Matsumon0104

2022/07/14 04:39

プログラムの全景を見てみないと何とも言えませんが、「activeをつける動作」が掲載いただいたクリックイベントの前に発生していないのかと思います。 同じ「.info-ttl」のクリックイベントを一つにまとめることはできませんか？
chibimame
chibimame

2022/07/14 05:21

>Matsumon0104 ありがとうございます！ 追記に、ポップアップに関するJSを追加しました。 クリックイベントを一つにまとめるというのは、 popupTtl[i].addEventListener('click', function (e) の中身に、bodyに対してclassを付与するといった記述を行うという意味でしょうか？ チグハグなこと言ってたらすみません🙇‍♀️
Matsumon0104
Matsumon0104

2022/07/14 05:30

いえ。 「popupTtl[i].addEventListener('click',」で設定しているイベント処理と「info.addEventListener('click',」で設定しているイベント処理をうまく一つのクリックイベント指定(addEventListener)で設定できないかなと。 基本的に、1つのイベントに対して、同じイベント(今回はclick)が登録された場合、登録された順でイベント処理が呼ばれます。 しかし、今回のパターンでは「window.addEventListener('DOMContentLoaded'」によって、クリックイベントの処理順序がちぐはぐになってしまいうまく動かないのかなと思いました。 イベント処理順序が想定どおりかどうかを確認するために、各クリックイベント内に「console.log」等を記載して確認してみてはいかがでしょうか。
chibimame
chibimame

2022/07/14 05:41

>Matsumon0104 ありがとうございます！ console.logで確認して、原因がわかりました。 結論から言うと、bodyを取ってきているgetElementsByTagNameが複数取ってくることになるので、後で記述してあるscrollProhabitedBodyがどのscrollProhabitedBodyなのかがわからずにエラーが起きていたようです。 scrollProhabitedBody[0]と記述すると上手くいきました。
Matsumon0104
Matsumon0104

2022/07/14 06:08

よかったです。 全然違うところを勘ぐっておりました。 「console.log」を入れて、処理の状態を見てみたりするのはやることが結構あるので、覚えておいて損はないと思いおますよ。 解決内容を回答に記載して、自己解決で質問を閉じていただけますか。
chibimame
chibimame

2022/07/14 06:35

console.logでの処理確認、肝に銘じます！ ありがとうございました🙇‍♀️
guest

回答2件

0

自己解決

javascript
1window.addEventListener('DOMContentLoaded', function () {
2 for (let i = 0; i < popupTtl.length; i++) {
3  popupTtl[i].addEventListener('click', function (e) {
4   e.preventDefault();
5   let dataPopupTtl = popupTtl[i].getAttribute('data-popup-ttl');
6   for (let j = 0; j < popupBox.length; j++) {
7    if (popupBox[j].getAttribute('data-popup-cont') === dataPopupTtl) {
8     popupBox[j].classList.add('active');
9     scrollProhabitedBody.classList.add('modal-open');
10    }
11   }
12  });
13  popupContentBg[i].addEventListener('click', function () {
14   popupBox[i].classList.add('active2');
15   setTimeout(function () {
16    popupBox[i].classList.remove('active');
17    popupBox[i].classList.remove('active2');
18    scrollProhabitedBody.classList.remove('modal-open');
19   }, 300);
20  });
21  popupCloseBtn[i].addEventListener('click', function () {
22   popupBox[i].classList.add('active2');
23   setTimeout(function () {
24    popupBox[i].classList.remove('active');
25    popupBox[i].classList.remove('active2');
26    scrollProhabitedBody.classList.remove('modal-open');
27   }, 300);
28  });
29 }
30});

投稿2022/07/14 06:34

chibimame
chibimame

総合スコア28

0

javascript
1<style>
2div{
3background-Color:gray;
4height:40%;
5}
6div:nth-child(odd){
7background-Color:yellow;
8}
9</style>
10<script>
11const noscroll=(e)=>e.preventDefault();
12const scrollEvents=["touchmove","wheel","mousewheel","scroll"];
13document.addEventListener('click', e=>{
14  const t=e.target;
15  if(t.closest('.btn')){
16    modal.showModal();
17    scrollEvents.forEach(e=>document.addEventListener(e,noscroll,{passive:false}));
18  }
19  if(t.closest('#modal')){
20    modal.close();
21    scrollEvents.forEach(e=>document.removeEventListener(e,noscroll,{passive:false}));
22  }
23});
24</script>
25<div><input type="button" class="btn" value="modal open"></div>
26<div><input type="button" class="btn" value="modal open"></div>
27<div><input type="button" class="btn" value="modal open"></div>
28<div><input type="button" class="btn" value="modal open"></div>
29<div><input type="button" class="btn" value="modal open"></div>
30<dialog id="modal">test</div>

投稿2022/07/14 04:17

編集2022/07/14 09:17
yambejp
yambejp

総合スコア118253

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

【JavaScript】ポップアップを表示させてる時にスクロール禁止したい