オーバーレイがアクティブの場合、ウェブページのスクロールが表示される

Question

ゴール：
オーバーレイを開くと、ウェブページのスクロール（オーバーレイのスクロールではありません）が表示されますが、アクティブではありません。

問題：
スクロールが見えなくなったときにページが右側に移動し、スクロールが表示されているときにページがオーバーレイに対して右側に移動するのが気になります。

これを行う方法はありますか？

ありがとうございます！

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

だけ追加：;：あなたなしスクロールクラスに "位置固定オーバーフロー-Yをスクロール"。

あなたはそれが、一番上に移動体の現在のスクロールに基づいて、現在のX位置を取得し、Yを設定したくない場合はその

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

にオフセットすることは、これを試してみてください（クリックするとスクロールが上に移動しますが、無効になります）

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) 
}