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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

658閲覧

(.overy,.humburger).hasClass('_open')時にスクロール禁止解除したいです。

free_teku

総合スコア103

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2021/12/12 05:45

前提・実現したいこと

(.overy,.humburger).hasClass('_open')時にスクロール禁止解除したいです。

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

nav_open時にスクロール禁止をしようとして、できたのですが 禁止解除が利かなくなりました。

試したこと

スクロール禁止or解除

こちらのコードを見て意味を理解しましたが、解除ができなくなってしまいました。
解除のコードを始め、

$('.overlay').on('click',function(){ $(".humburger").on('click', function(){

の時に、

(function(){ function noScroll(event) { event.preventDefault(); } }) // スクロール禁止を解除(SP) document.removeEventListener('touchmove', noScroll, { passive: false }); // スクロール禁止を解除(PC) document.removeEventListener('mousewheel', noScroll, { passive: false });

書きましたが、無理でした。☆

ご教授頂けると幸いです。よろしくお願いいたします。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <meta content="IE=edge" http-equiv="X-UA-Compatible"> 6 <meta content="width=device-width, initial-scale=1.0" name="viewport"> 7 <title>石井花壇|温海温泉旅館【公式サイト】</title> 8 <meta content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。" name="description"> 9 <link href="./css/destyle.css" rel="stylesheet"> 10 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"><!--flatpicker--> 11 <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet"> 12 <script src="https://cdn.jsdelivr.net/npm/flatpickr"> 13 </script> 14 <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"> 15 </script><!-- 日本語化 --> 16 <link href="./css/style.css" rel="stylesheet"> 17</head> 18<body> 19 <div class="body-wrapper"> 20 <header class="header"> 21 <div class="header-inner"> 22 <div class="header-left"> 23 <h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./img/top-header-logo.png"></a></h1> 24 <nav class="nav drawer-nav"> 25 <ul class="header-list"> 26 <li class="header-item"> 27 <a href="./Room/room.html">お部屋</a> 28 </li><!-- /.header-item --> 29 <li class="header-item"> 30 <a href="./Menu/menu.html">お料理</a> 31 </li><!-- /.header-item --> 32 <li class="header-item"> 33 <a href="./Onsen/onsen.html">温泉</a> 34 </li><!-- /.header-item --> 35 </ul><!-- /.header-list --> 36 </nav><!-- /.nav --> 37 </div> 38 <div class="header-right"> 39 <div class="header-link" id="js-modal"> 40 <a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> --> 41 宿泊予約</a> 42 </div><!-- /.header-link --> 43 <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button> 44 </div><!-- /.header-right --> 45 </div><!-- /.header-inner --> 46 </header><!-- /.header --> 47 <div class="overlay"></div><!-- /.overlay -->

JQ

1 2$(function(){ 3//humburger関数 4 5 6 $(".humburger").on('click', function(){ 7 8 if($("this").hasClass('_active')){ 9 $(this).removeClass('_active'); 10 $(".line").removeClass('_open'); 11 12 $(".nav").removeClass("nav-open"); 13 // $(".drawer-nav").removeClass('_active'); 14 $('.overlay').removeClass('_open'); 15 16 // スクロール禁止解除 17 (function(){ 18 function noScroll(event) { 19 event.preventDefault(); 20 } 21 }) 22 // スクロール禁止を解除(SP) 23 document.removeEventListener('touchmove', noScroll, { passive: false }); 24 // スクロール禁止を解除(PC) 25 document.removeEventListener('mousewheel', noScroll, { passive: false }); 26 27} 28else{ 29 $(this).addClass('_active'); 30 $('.line').addClass('_open'); 31 32 $(".nav").addClass("nav-open"); 33 $('.drawer-nav').addClass('_open'); 34 $('.overlay').addClass('_open'); 35 36 (function(){ 37 function noScroll(event) { 38 event.preventDefault(); 39 } 40 }) 41 // スクロールを禁止する関数 42 function noScroll(event) { 43 event.preventDefault(); 44 } 45 // スクロール禁止(SP) 46 document.addEventListener('touchmove', noScroll, { passive: false }); 47 // スクロール禁止(PC) 48 document.addEventListener('mousewheel', noScroll, { passive: false }); 49 50} 51 52 }); 53 54 55 56 $('.overlay').on('click',function(){ 57 if($(this).hasClass('_open')){ 58 59 $(this).removeClass('_open'); 60 $('.humburger').removeClass('_active'); 61 $('.line').removeClass('_open'); 62 63 $(".nav").removeClass('nav-open'); 64 // $('.drawer-nav').removeClass('_active'); 65 66 } 67 }); 68 69 $('.humburger, .overlay').on('click', function(){ 70 if($(any).hasClass('_open')){ 71 // スクロール禁止解除 72 (function(){ 73 function noScroll(event) { 74 event.preventDefault(); 75 } 76 }) 77 // スクロール禁止を解除(SP) 78 document.removeEventListener('touchmove', noScroll, { passive: false }); 79 // スクロール禁止を解除(PC) 80 document.removeEventListener('mousewheel', noScroll, { passive: false }); 81 82 } 83 }); 84});

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問