Önlemek <code>nav</code> açıkken geçerli kod, vücut kaydırır kullanarak arka planda

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

içinde kaydırma?

P.S. Kümelenmiş kodlama tarzımı affet. Herhangi birinin nasıl temiz tutulacağı konusunda tavsiyesi varsa, lütfen paylaşın.

P.P.S. Bütün sorumu sordum, ama daha fazla ayrıntıya ihtiyacım var diyor. Gelecekte bundan nasıl kaçınmalıyım?

Sen nav ekleyebilir ve vücut üzerinde bir sınıf kaldırmak ve bunun istediğiniz şeyin ise, vücut etiketindeki overflow: hidden ayarlamak için kullanabilirsiniz da geçiş yapabilir

kaynak

2015-12-14 Austin Griner

Ne yapmak istiyorsun gerektirdiğini kayda değer olabilir mi? Açılır pencere açılır ve açılır pencere açıkken kaydırmayı devre dışı bırakmak ister misiniz? – tomysshadow

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

kaynak

2015-12-14 16:49:29

Sayfayı yine de kaydırabilirsiniz, bu sadece kaydırma çubuğunu gizler. –

document.body.style.overflow = 'hidden'; açık/closeNav fonksiyonları:

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

kaynak

2015-12-14 16:50:33 myf

Sayfayı yine de kaydırabilirsiniz, bu sadece kaydırma çubuğunu gizler. –

UI açıkken böyle vücut kaydırma olayı preventDefaults çalışan denediniz mi?

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

bu çözüm JQuery

kaynak

2015-12-14 16:51:31

Önlemek <code>nav</code> açıkken geçerli kod, vücut kaydırır kullanarak arka planda

cevap

İlgili konular