Prevenire lo scorrimento in fondo

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

Utilizzando il codice corrente, il corpo scorre mentre il nav è aperto - Come posso evitare questo?

P.S. Perdonate il mio stile di codifica cluster. Se qualcuno ha qualche consiglio su come tenerlo pulito, si prega di condividere.

P.P.S. Ho già fatto la mia intera domanda, ma dice che ho bisogno di maggiori dettagli. Come dovrei evitare questo in futuro?

fonte

2015-12-14 Austin Griner

Cosa vuoi fare? Vuoi avere una finestra popup mobile e disabilitare lo scorrimento quando la finestra popup è aperta? – tomysshadow

Si potrebbe rendere il vostro navigatore alternare anche aggiungere e rimuovere una classe sul corpo, e l'uso che per impostare overflow: hidden sul tag body, se questo è quello che stai chiedendo:

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

fonte

2015-12-14 16:49:29

È ancora possibile scorrere la pagina, questo nasconde semplicemente la barra di scorrimento. –

È possibile alternare document.body.style.overflow = 'hidden'; nei tuoi aperti/funzioni 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

fonte

2015-12-14 16:50:33 myf

È ancora possibile scorrere la pagina, questo nasconde semplicemente la barra di scorrimento. –

Hai provato in esecuzione preventDefaults sul evento scroll corpo come questo, quando l'interfaccia utente è aperto?

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

potrebbe essere la pena di notare che questa soluzione richiede JQuery

fonte

2015-12-14 16:51:31

Prevenire lo scorrimento in fondo

risposta

Problemi correlati