javascript - medicina - navigation menu html css

¿Cómo evitar el desplazamiento en el contenido del cuerpo y habilitar el desplazamiento en la navegación fuera de la lona cuando está abierto?

Question

Implementé una navegación fuera de línea muy básica ( http://blog.tomri.ch/super-simple-off- canvas-menu-navigation/). El único problema que tengo es que no puede desplazarse por el menú, esto es especialmente problemático en el modo de paisaje móvil, donde el menú se extiende debajo del área de pantalla visible.

Me pregunto si hay una forma, cuando el menú de navegación está abierto, para evitar que el contenido dentro del div page-wrapper desplace y habilite el desplazamiento en la navegación fuera de la lona, ​​y, si es posible, no muestre una gran barra de desplazamiento fea en la navegación.

HTML:

<nav id="menu">
    <a href="#menu" class="menu-link"></a>
    <ul>
       <span><a href="#">Title</a></span>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">Blog</a></li>
    </ul>
</nav>

<div class="page-wrapper">
    Body Content Here
</div>

CSS:

#menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 13.755em;
    right: -13.755em;
    height: 100%;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
}
    #menu.active {
        -webkit-transform: translate(-13.755em, 0px);
        -moz-transform: translate(-13.755em, 0px);
        -o-transform: translate(-13.755em, 0px);
        -ms-transform: translate(-13.755em, 0px);
        transform: translate(-13.755em, 0px);
    }
.page-wrapper {
       -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
       -o-transform: translate(0px, 0px);
       -ms-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
       -webkit-transition: 0.15s ease;
       -moz-transition: 0.15s ease;
       -o-transition: 0.15s ease;
       transition: 0.15s ease;  
}
    .page-wrapper.active {
           -webkit-transform: translate(-13.725em, 0px);
           -moz-transform: translate(-13.725em, 0px);
           -o-transform: translate(-13.725em, 0px);
           -ms-transform: translate(-13.725em, 0px);
           transform: translate(-13.725em, 0px);
    }

.menu-link {
    position: absolute;
    top: 15px;
    left: -50px;
}

Javascript:

$(".menu-link").click(function(){
    $("#menu").toggleClass("active");
    $(".page-wrapper").toggleClass("active");
});

Answer 1

Para permitir que cualquier elemento de nivel de bloque se desplace, dele un overflow:auto; y según la height:100%; tu sitio / aplicación height:100%; . Para deshabilitar el desplazamiento en el contenido principal, hay algunas cosas que puede hacer, pero deberá experimentar con ellas. Puede hacer que la navegación se extienda al 100% del ancho de la página, y que el área donde ve el contenido quede cubierta por un elemento invisible, bloquear el desplazamiento o simplemente seguir desplazándose por la navegación. Puede, al hacer clic, deshabilitar / habilitar el desplazamiento en el cuerpo también, tenga en cuenta los mejores resultados aplicar overflow:hidden; en html,body , soluciona algunos problemas de navegador cruzado / ios.

Espero que esto te de una idea!

Answer 2

Bueno, puedes agregar a tu contenedor div estos atributos cuando se abre el menú

.container.active{
 position:fixed;
 width:100%;
}

o

.container.active{
    height:100%;
    overflow:hidden;
}

como @Shan Robertson explica

O simplemente agrega una clase con esos atributos, que bloquearía el contenido principal para desplazarse mientras el navegador lateral está abierto.

Answer 3

No tiene que escribir código externo, simplemente escríbalo en ''afterOpen'' settings ''after Open'': function () {$ ("body") .css ("overflow-y", "hidden");