I'm looking for a way to disable scrolling when this full page menu is opened, so that the user doesn't accidentally scroll the page and then when they close the menu they are at a different part of the page.

As the same button is being used to open and close the menu, I think I will need to use toggle?

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" >
   <ol>
     <li >HOME</li>
  </ol>
</nav>
<button id="menu-button"  ><span style="color:black"> </span></button>

<div ></div>

CodePudding user response：

You should be able to apply a class to the body on toggle. You can then check the body for this class and set overflow: hidden

body.open-menu {
   overflow: hidden
}

This will disable scrolling of the body.