Отключить прокрутку при открытии меню

Я ищу способ отключить прокрутку при открытии этого полного меню страницы, чтобы пользователь случайно не прокручивал страницу, а затем, когда они закрывают меню, они находятся в другой части страницы.

Поскольку для открытия и закрытия меню используется одна и та же кнопка, я думаю, мне нужно будет использовать переключатель?

var menuAnimation = gsap.timeline({paused:true});
var menuAnimationBack = gsap.timeline({paused:true, reversed: true});
var navMain = document.getElementById("nav-main");
var menuButton = document.getElementById("menu-button");
var toggle = true;

gsap.set('.link',{y:30});

menuAnimation
        .to(navMain, {duration:.8, width: '100%', clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)", ease: "power2.inOut", x:0, y:0, z:0})
.to('.link',{duration:.5,autoAlpha:1,y:0,stagger:.2,ease: "power4.out"});


menuAnimationBack
.to('.link',{duration:.5,autoAlpha:0,y:30,stagger:.2,ease: "power4.out"})
.to(navMain, {duration:0.55,width: 0, clipPath: "polygon(0 0, -100% 0, 100% 100%, 0 100%)", ease: "power4.in", x:0, y:0, z:0});

 
menuButton.onclick = function() {
  toggle = !toggle;
  toggle === false ? menuAnimation.play(0) : menuAnimationBack.play(0);
};
.content{
height:500px;
}

.column {
    float: left;
    width: 50%;
    }

    .row:after {
    content: "";
    display: table;
    clear: both;
    }

.menu-button {
     position: fixed;
     background-color: #f2f2f2;
     outline: none;
     border: 2px solid black;
     border-radius: 50%;
     padding: 0;
     top: 8px;
     right: 20px;
     width: 30px;
     height: 30px;
     z-index: 0;
     cursor: pointer;
     color: black;
}

.menu-button:hover{
    background-color: #F2FF00 !important;
}

.menu-button:focus {
    outline: none;
    background-color: #f2f2f2;
}

 nav {
     height: 100vh;
     display: flex;
     flex-flow: column wrap;
     justify-content: center;
     align-content: center;
     align-items: center;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: #ff635e;
     transform: translate3d(-100%, 0, 0);
}
 nav ol {
     display: flex;
     flex-flow: column wrap;
     justify-content: center;
     align-content: center;
     align-items: center;
     position: fixed;
}

 .skew {
     clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
 .vertical {
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 .skewback {
     clip-path: polygon(0 0, -100% 0, 100% 100%, 0 100%);
}
<script src = "https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id = "nav-main" class = "skew">
   <ol>
     <li class = "link">HOME</li>
  </ol>
</nav>
<button id = "menu-button" class = "menu-button" ><span style = "color:black">+</span></button>

<div class = "content"></div>

Обычно это тело, которое будет прокручиваться. Когда вы открываете меню, вы скрываете переполнение тела, а когда вы закрываете переполнение тела меню автоматически (или только x или y)

pier farrugia 19.12.2022 12:39

Я пробовал это, но это не работает: JS - menuButton.addEventListener('click', () => { document.body.classList.toggle('no-scroll') }) CSS - .no-scroll { overflow-y: hidden; }

gjjr 19.12.2022 13:47

просто попробуйте этот код в своем скрипте 'menuButton.onclick (функция)' следующим образом: document.documentElement.scrollTop = 0;

Anonymouse Lovecat 19.12.2022 14:20

не повезло, к сожалению

gjjr 19.12.2022 14:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны иметь возможность применить класс к телу при переключении. Затем вы можете проверить тело для этого класса и установить overflow: hidden

body.open-menu {
   overflow: hidden
}

Это отключит прокрутку тела.

Я пробовал это, но это не работает: JS - menuButton.addEventListener('click', () => { document.body.classList.toggle('no-scroll') }) CSS - .no-scroll { overflow-y: hidden; }

gjjr 19.12.2022 13:46

хорошо, это означает, что что-то еще прокручивается. Посмотрите в инструментах разработчика, чтобы увидеть в структуре HTML, какой элемент прокручивается, когда меню открыто.

pier farrugia 19.12.2022 14:29

Я думаю, мне нужно настроить таргетинг на div "#outer-wrap", как мне изменить JS в моем последнем комментарии, чтобы настроить его?

gjjr 19.12.2022 14:50
document.getElementById('outer-wrap').classList.toggle('no-s‌​croll')
Danny van Holten 19.12.2022 15:50

Хорошо, поэтому мне также пришлось использовать html, body {height:100%}, чтобы это сработало, но когда я закрываю меню, я не могу прокручивать страницу?

gjjr 19.12.2022 16:42

Вы должны снова удалить класс.

Danny van Holten 20.12.2022 12:03

Другие вопросы по теме