前提・実現したいこと
(.overy,.humburger).hasClass('_open')時にスクロール禁止解除したいです。
発生している問題・エラーメッセージ
nav_open時にスクロール禁止をしようとして、できたのですが 禁止解除が利かなくなりました。
試したこと
こちらのコードを見て意味を理解しましたが、解除ができなくなってしまいました。
解除のコードを始め、
$('.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/ツールのバージョンなど)
あなたの回答
tips
プレビュー