Overflow on off canvas menu?

Question

I’m making a menu off canvas, in fact it is always on the screen, and when I click the button, what moves is mine main, the problem is the overflow, when I open the menu it should not let me give scroll, but rather close the menu in case I click anything out of it. But it’s giving me overflow on the whole page. any suggestions? PS: I took inspiration from this site, credit to them, http://www.x-apps.com.br/ .

var menu = false;
$('#hamburguer').click(function() {
    if (menu === false) {
      mostraCanvas();
    } else {
      escondeCanvas();
    }
});

function escondeCanvas() {
    $("#main").css("padding-left", "0");
    $("html, body").css("overflow", "auto");

    menu = false;
}

function mostraCanvas() {
  $("#main").css("padding-left", "50vw");
  $("html, body").css("overflow", "hidden");
  menu = true;
}

$('.off-item').click(function() {
    escondeCanvas();
});

.off-canvas{
  padding-top: 10px;
  left: 0;
  background-color: #292929;
  height: 100vh;
  width: 50vw;
  position: fixed;
  text-align: left;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: -1;
}
#main{
  z-index: 9999;
  position: absolute;
  margin: 0 !important;
  transition: all .2s linear;
  -webkit-transition: padding .2s linear;
  -moz-transition: padding .2s linear;
  -o-transition: padding .2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
      <div class="topo" id="topo">
      <button id="hamburguer"><h1><span class="glyphicon glyphicon-menu-hamburger blue btn-nav"></span></h1><button>
    </div>
      <nav class="navbar" id="navbar">
         <ul>
            <a href="#banner" id="linkbanner">
               <li class="nav-item">
                  <h2>Inicio</h2>
               </li>
            </a>
            <a href="#sobremim">
               <li class="nav-item">
                  <h2>Sobre Mim</h2>
               </li>
            </a>
            <a href="#portfolio">
               <li class="nav-item">
                  <h2>Portfólio</h2>
               </li>
            </a>
            <a href="#habilidades">
               <li class="nav-item">
                  <h2>Habilidades</h2>
               </li>
            </a>
            <a href="#contato">
               <li class="nav-item">
                  <h2>Contato</h2>
               </li>
            </a>
         </ul>
      </nav>
    blablabla até o fim do main...
  </div>

Answer 1

I came to see that you made some updates on the site and today I did some tests with your current version. Try the following changes to see if it works. (As I’m testing on a downloaded version of your site, I can’t see with 100% loyalty.)

In your script:

function escondeCanvas() {
    $("#main").css("padding-left", "0");
    $("body").css("overflow-x", "");
    $("nav").removeClass("open");
    menu = false;
}

function mostraCanvas() {
  $("#main").css("padding-left", "50vw");
  $("body").css("overflow-x", "hidden");
  $("nav").addClass("open");
  menu = true;
}

In your CSS:

nav.open {
    z-index: 1;
}
nav.open + #main {
    height: 100vh;
    overflow-y: hidden;
}