Я ищу способ отключить прокрутку при открытии этого полного меню страницы, чтобы пользователь случайно не прокручивал страницу, а затем, когда они закрывают меню, они находятся в другой части страницы.
Поскольку для открытия и закрытия меню используется одна и та же кнопка, я думаю, мне нужно будет использовать переключатель?
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>Я пробовал это, но это не работает: JS - menuButton.addEventListener('click', () => { document.body.classList.toggle('no-scroll') }) CSS - .no-scroll { overflow-y: hidden; }
просто попробуйте этот код в своем скрипте 'menuButton.onclick (функция)' следующим образом: document.documentElement.scrollTop = 0;
не повезло, к сожалению



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы должны иметь возможность применить класс к телу при переключении. Затем вы можете проверить тело для этого класса и установить overflow: hidden
body.open-menu {
overflow: hidden
}
Это отключит прокрутку тела.
Я пробовал это, но это не работает: JS - menuButton.addEventListener('click', () => { document.body.classList.toggle('no-scroll') }) CSS - .no-scroll { overflow-y: hidden; }
хорошо, это означает, что что-то еще прокручивается. Посмотрите в инструментах разработчика, чтобы увидеть в структуре HTML, какой элемент прокручивается, когда меню открыто.
Я думаю, мне нужно настроить таргетинг на div "#outer-wrap", как мне изменить JS в моем последнем комментарии, чтобы настроить его?
document.getElementById('outer-wrap').classList.toggle('no-scroll')Хорошо, поэтому мне также пришлось использовать html, body {height:100%}, чтобы это сработало, но когда я закрываю меню, я не могу прокручивать страницу?
Вы должны снова удалить класс.
Обычно это тело, которое будет прокручиваться. Когда вы открываете меню, вы скрываете переполнение тела, а когда вы закрываете переполнение тела меню автоматически (или только x или y)