防止滾動背景

function openNav() { 
 
    document.getElementById('UI').className = "open"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById('UI').className = "closed"; 
 
}

body { 
 
    font-family: monospace; 
 
    padding: 75px; 
 
    word-wrap: break-word; 
 
} 
 
#UI { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all .5s; 
 
} 
 
#UI.closed { 
 
    background-color: rgba(255, 255, 255, .0); 
 
} 
 
#UI.open { 
 
    background-color: rgba(05, 55, 105, .75); 
 
} 
 
#UI button { 
 
    font-size: 30; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 0; 
 
    outline: 0; 
 
    color: white; 
 
    background-color: blue; 
 
    transition: all .5s; 
 
    cursor: pointer; 
 
    position: fixed; 
 
} 
 
#UI button:hover { 
 
    background-color: white; 
 
    color: blue; 
 
    box-shadow: 0px 0px 15px blue; 
 
} 
 
#openNavBtn { 
 
    top: 5px; 
 
} 
 
#topBtn { 
 
    top: 5px; 
 
    right: 5px; 
 
} 
 
#nav { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: blue; 
 
    transition: all .5s; 
 
} 
 
#closeNavBtn { 
 
    position: fixed; 
 
    left: -50px; 
 
} 
 
#UI.closed #openNavBtn { 
 
    left: 5px; 
 
} 
 
#UI.closed #topBtn { 
 
    right: 5px; 
 
} 
 
#UI.closed #nav { 
 
    left: -300px; 
 
    box-shadow: 0px 0px 15px black; 
 
} 
 
#UI.closed #closeNavBtn { 
 
    left: -50px; 
 
} 
 
#UI.open #openNavBtn { 
 
    left: -55px; 
 
} 
 
#UI.open #topBtn { 
 
    right: -55px; 
 
} 
 
#UI.open #nav { 
 
    left: 0; 
 
    box-shadow: 0px 0px 15px black; 
 
} 
 
#UI.open #closeNavBtn { 
 
    left: 250px; 
 
}

<html> 
 

 
<body> 
 
    <div id="UI" class="closed"> 
 
    <div id="nav"> 
 
     <button id="closeNavBtn" onclick="closeNav()">&times;</button> 
 
    </div> 
 
    <button id="openNavBtn" onclick="openNav();">&#9776;</button> 
 
    <button id="topBtn">&#8613;</button> 
 
    </div> 
 
    <h1>SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL

使用當前的代碼，身體滾動而nav是開放的 - 我該如何避免這種情況？

P.S.請原諒我的羣集編碼風格。如果任何人有任何關於如何保持清潔的建議，請分享。

P.P.S.我已經問過我的整個問題，但它說我需要更多的細節。我將來應該如何避免這種情況？

來源

2015-12-14 Austin Griner

你想做些什麼？你想有一個浮動的彈出窗口，並且當彈出窗口打開時禁用滾動？ – tomysshadow

你可以讓你的資產淨值也切換添加和刪除對機體的一類，並用它來設置overflow: hidden在身上的標籤，如果這是你的要求是什麼：

function openNav() { 
 
    document.getElementById('UI').className = "open"; 
 
    document.body.className = 'navopen'; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById('UI').className = "closed"; 
 
    document.body.className = ''; 
 
}

body { 
 
    font-family: monospace; 
 
    padding: 75px; 
 
    word-wrap: break-word; 
 
} 
 
body.navopen { 
 
    overflow: hidden; 
 
} 
 
#UI { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all .5s; 
 
} 
 
#UI.closed { 
 
    background-color: rgba(255, 255, 255, .0); 
 
} 
 
#UI.open { 
 
    background-color: rgba(05, 55, 105, .75); 
 
} 
 
#UI button { 
 
    font-size: 30; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 0; 
 
    outline: 0; 
 
    color: white; 
 
    background-color: blue; 
 
    transition: all .5s; 
 
    cursor: pointer; 
 
    position: fixed; 
 
} 
 
#UI button:hover { 
 
    background-color: white; 
 
    color: blue; 
 
    box-shadow: 0px 0px 15px blue; 
 
} 
 
#openNavBtn { 
 
    top: 5px; 
 
} 
 
#topBtn { 
 
    top: 5px; 
 
    right: 5px; 
 
} 
 
#nav { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: blue; 
 
    transition: all .5s; 
 
} 
 
#closeNavBtn { 
 
    position: fixed; 
 
    left: -50px; 
 
} 
 
#UI.closed #openNavBtn { 
 
    left: 5px; 
 
} 
 
#UI.closed #topBtn { 
 
    right: 5px; 
 
} 
 
#UI.closed #nav { 
 
    left: -300px; 
 
    box-shadow: 0px 0px 15px black; 
 
} 
 
#UI.closed #closeNavBtn { 
 
    left: -50px; 
 
} 
 
#UI.open #openNavBtn { 
 
    left: -55px; 
 
} 
 
#UI.open #topBtn { 
 
    right: -55px; 
 
} 
 
#UI.open #nav { 
 
    left: 0; 
 
    box-shadow: 0px 0px 15px black; 
 
} 
 
#UI.open #closeNavBtn { 
 
    left: 250px; 
 
}

<html> 
 

 
<body> 
 
    <div id="UI" class="closed"> 
 
    <div id="nav"> 
 
     <button id="closeNavBtn" onclick="closeNav()">&times;</button> 
 
    </div> 
 
    <button id="openNavBtn" onclick="openNav();">&#9776;</button> 
 
    <button id="topBtn">&#8613;</button> 
 
    </div> 
 
    <h1>SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL

來源

2015-12-14 16:49:29

你仍然可以滾動頁面，這只是隱藏滾動條。 –

您可以切換document.body.style.overflow = 'hidden';在你打開/ closeNav功能：

function openNav() { 
 
    document.getElementById('UI').className = "open"; 
 
    document.body.style.overflow = 'hidden'; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById('UI').className = "closed"; 
 
    document.body.style.overflow = 'auto'; 
 
}

body { 
 
    font-family: monospace; 
 
    padding: 75px; 
 
    word-wrap: break-word; 
 
} 
 
#UI { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all .5s; 
 
} 
 
#UI.closed { 
 
    background-color: rgba(255, 255, 255, .0); 
 
} 
 
#UI.open { 
 
    background-color: rgba(05, 55, 105, .75); 
 
} 
 
#UI button { 
 
    font-size: 30; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 0; 
 
    outline: 0; 
 
    color: white; 
 
    background-color: blue; 
 
    transition: all .5s; 
 
    cursor: pointer; 
 
    position: fixed; 
 
} 
 
#UI button:hover { 
 
    background-color: white; 
 
    color: blue; 
 
    box-shadow: 0px 0px 15px blue; 
 
} 
 
#openNavBtn { 
 
    top: 5px; 
 
} 
 
#topBtn { 
 
    top: 5px; 
 
    right: 5px; 
 
} 
 
#nav { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: blue; 
 
    transition: all .5s; 
 
} 
 
#closeNavBtn { 
 
    position: fixed; 
 
    left: -50px; 
 
} 
 
#UI.closed #openNavBtn { 
 
    left: 5px; 
 
} 
 
#UI.closed #topBtn { 
 
    right: 5px; 
 
} 
 
#UI.closed #nav { 
 
    left: -300px; 
 
    box-shadow: 0px 0px 15px black; 
 
} 
 
#UI.closed #closeNavBtn { 
 
    left: -50px; 
 
} 
 
#UI.open #openNavBtn { 
 
    left: -55px; 
 
} 
 
#UI.open #topBtn { 
 
    right: -55px; 
 
} 
 
#UI.open #nav { 
 
    left: 0; 
 
    box-shadow: 0px 0px 15px black; 
 
} 
 
#UI.open #closeNavBtn { 
 
    left: 250px; 
 
}

<html> 
 

 
<body> 
 
    <div id="UI" class="closed"> 
 
    <div id="nav"> 
 
     <button id="closeNavBtn" onclick="closeNav()">&times;</button> 
 
    </div> 
 
    <button id="openNavBtn" onclick="openNav();">&#9776;</button> 
 
    <button id="topBtn">&#8613;</button> 
 
    </div> 
 
    <h1>SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL

來源

2015-12-14 16:50:33 myf

你仍然可以滾動頁面，這只是隱藏滾動條。 –

您是否嘗試過在這樣的身體滾動事件運行preventDefaults當UI是開放的？

$("body").scroll(function(e){ 
    if($("#UI").hasClass("open")) 
    e.preventDefault(); 
});

可能是值得注意的是，這種解決方案需要的JQuery

來源

2015-12-14 16:51:31

防止滾動背景

回答

相關問題