Le défilement de la page Web doit être visible lorsque l'incrustation est active

Question

Objectif:
Lorsque vous ouvrez l'incrustation, le défilement de la page Web (pas le défilement de l'incrustation) doit être visible mais pas actif.

Problème:
Il est irritant de voir que la page se déplace vers la droite lorsque vous masquez le défilement et lorsque vous voyez le défilement, la page se déplace vers la droite par rapport à la superposition.

Existe-t-il un moyen de le faire?

Merci!

function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
    
 
    $('body').addClass('noscroll'); 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
    
 
    $('body').removeClass('noscroll'); 
 
    
 
}

body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.8); 
 
    overflow-y: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 10%; 
 
    width: 70%; 
 
    text-align: left; 
 
    margin: 30px auto; 
 
    background: white; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
    
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 

 
.noscroll { 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    
 
    <a href="#">About</a> 
 
    <a href="#">Services</a>   
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">CANDY</a>  
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
 
<p>In this example, the navigation menu will slide downwards from the top:</p> 
 
    
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 

 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>

Answer 1

il suffit d'ajouter "position: fixed; overflow-y: faites défiler" à votre pas de classe de défilement.

si vous ne voulez pas aller vers le haut, obtenir la position actuelle de X sur la base actuelle du défilement du corps et régler le décalage en Y pour que

function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
    $(document).scrollTop() 
 
    $('body').addClass('noscroll'); 
 

 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
    
 
    $('body').removeClass('noscroll'); 
 
$('body').scroll(function() { alert("scroll") }); 
 
    
 
}

body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
    overflow-y: scroll; 
 

 
} 
 

 
.overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.8); 
 
    overflow-y: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 10%; 
 
    width: 70%; 
 
    text-align: left; 
 
    margin: 30px auto; 
 
    background: white; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
    
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 

 
.noscroll { 
 
    position: fixed; overflow-y:scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    
 
    <a href="#">About</a> 
 
    <a href="#">Services</a>   
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">CANDY</a>  
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
 
<p>In this example, the navigation menu will slide downwards from the top:</p> 
 
    
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 

 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>

Answer 2

Try this (défilement aller vers le haut lorsque l'utilisateur clique, mais sera désactivé):

function noscroll() { 
    window.scrollTo(0, 0); 
} 

function openNav() { 
    document.getElementById("myNav").style.height = "100%"; 
    window.addEventListener('scroll', noscroll); 
} 

function closeNav() { 
    document.getElementById("myNav").style.height = "0%"; 
    window.removeEventListener('scroll', noscroll) 
}