web-dev-qa-db-fra.com

Comment empêcher le défilement sur le contenu du corps et permettre le défilement sur une navigation hors-toile lorsqu'elle est ouverte?

J'ai mis en place une navigation hors site très basique ( http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/ ). Le seul problème que je rencontre est que vous ne pouvez pas faire défiler le menu, cela est particulièrement problématique en mode paysage mobile, où le menu s'étend au-dessous de la zone d'écran visible.

Je me demande s’il est possible, lorsque le menu de navigation est ouvert, d’empêcher le défilement du contenu de la page-wrapper div et de permettre le défilement dans la navigation hors-toile, et, si possible, de ne pas afficher une grande barre de défilement moche sur la navigation. .

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");
});
javascriptjqueryhtmlcssnavigation
5
APAD1

Pour permettre le défilement d'un élément de niveau bloc, vous lui donnez overflow:auto; & en fonction de votre site/application height:100%;. Pour désactiver le défilement sur le contenu principal, vous pouvez faire certaines choses, mais vous devrez les expérimenter. Le nav peut s’étendre sur 100% de la largeur de la page et la zone dans laquelle vous voyez le contenu est simplement couverte par un élément invisible, pour bloquer le défilement ou continuer à faire défiler le nav. Vous pouvez également cliquer sur pour désactiver/activer le défilement sur le corps. Remarque: pour obtenir les meilleurs résultats, appliquez overflow:hidden; sur html,body, ce qui résout certains problèmes de navigation croisée/ios.

J'espère que cela vous donne un aperçu!

4
Shan Robertson

Eh bien, vous pouvez ajouter à votre conteneur div ces attributs lorsque le menu est ouvert

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

ou

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

comme l'explique @Shan Robertson

Ou simplement ajouter une classe avec ces attributs, ce qui bloquerait le contenu principal à faire défiler lorsque la navigation latérale est ouverte.

3
Jhonnatan Gonzalez Rodriguez

Vous n'avez pas besoin d'écrire de code externe, écrivez-le simplement dans 'afterOpen' settings 'afterOpen': function () {$ ("body") .css ("overflow-y", "hidden");

1
Bassem Zaitoun