Comment éviter de faire défiler le contenu du corps et activer le défilement sur toile de navigation lors de l'ouvrir?

J'ai mis en place une base très large-toile de navigation(http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/). Le seul problème que je vais avoir, c'est que vous ne pouvez pas faire défiler le menu, ce qui est particulièrement problématique dans le mobile en mode paysage, où le menu s'étend au-dessous de la partie visible de l'écran.

Je me demandais si il ya une façon, lorsque le menu de navigation est ouverte, pour éviter que le contenu à l'intérieur de la page-wrapper div de défilement et activer le défilement dans le hors-la navigation sur le canevas, et, si possible, de ne pas montrer un gros laid de la barre de défilement sur la barre de 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");
});

ce qui est hors-la navigation sur le canevas?
La navigation est absolument placé de sorte qu'il reste en dehors de la zone visible jusqu'à ce qu'il est déclenché.
Il est beaucoup plus facile à stocker l'état dans le corps ou balise html. $("html").toggleClass("menu-active"); avec les sélecteurs css .menu-active .page-wrapper et .menu-active #menu. De cette manière, ils restent tous dans la synchronisation, et une seule classe modifie les deux ensembles de propriétés css.

OriginalL'auteur APAD1 | 2014-05-14

4

De permettre à tout élément de niveau bloc pour faire défiler vous donner overflow:auto; & en fonction de votre site/application height:100%;. Pour désactiver le défilement du contenu principal, il ya quelques choses que vous pouvez faire, mais vous aurez à expérimenter avec eux. Vous pourriez avoir de la valeur liquidative s'étendre à 100% de la largeur de la page, et la région où vous voyez le contenu est simplement recouvert par un élément invisible, pour bloquer le défilement ou tout simplement garder le défilement de la valeur liquidative. Vous pouvez, sur un clic, désactiver/activer le défilement sur le corps aussi, remarque pour de meilleurs résultats, appliquer overflow:hidden; sur html,body, elle résout un navigateur croix /ios questions.

Espère que cela vous donne un aperçu!

C'est un bon début et le long de la lignes de ce que je pensais. Merci, maintenant hors de l'expérience!
avec l'app comme les fonctionnalités, vous devez penser un peu différemment en termes de lutte contre le problème. Et n'ayez pas peur d'utiliser webkit préfixé choses comme -webkit-overflow-scrolling:touch; pour ios, et cubic-bezier pour la transition css mesures d'assouplissement cubic-bezier.com)... ça fait toute la différence dans le monde
L'une de ces croix problèmes de navigateur est Firefox sur ios, qui continuera à défiler, à moins que, comme Shan dit, vous mettre un overflow hidden pour le html. Le problème ici est que vous ne serez pas en mesure de garder la position de défilement, il sera au top après la désactivation du menu. De toute façon à empêcher que cela se passe sans l'aide de javascript? Gardez la position de défilement où il est? Même si c'est avec moins de prise en charge du navigateur.
Avez-vous trouver une solution pour cela? J'ai besoin d'être en mesure de conserver la position. Je suis en désactivant temporairement de défilement du corps principal, tandis que les superpositions sont en vue. Une fois que la superposition est fermé, l'utilisateur doit rester à la position de défilement ils ont été au préalable à l'ouverture de la superposition.

OriginalL'auteur Shan Robertson
3

Bien que vous pouvez ajouter à votre conteneur div cela attributs te menu est ouvert
```
.container.active{
position:fixed;
width:100%;
}
```
ou
```
.container.active{
height:100%;
overflow:hidden;
}
```
@Shan Robertson expliquer

Ou tout simplement ajouter une classe avec ces attributs, qui pourrait bloquer le contenu principal de scrolll tandis que le côté nav est ouvert.

OriginalL'auteur Jhonnatan Gonzalez Rodriguez
1

Vous n'avez pas à écrire de code externe, il suffit de l'écrire dans "afterOpen" paramètres
'afterOpen': function() { $( "body" ).css( "overflow-y", "hidden" );

Pourriez-vous rendre un peu plus clair que vous êtes à la définition d'une fonction de rappel en poids plume, par opposition à jQuery ou autre chose? Aussi, je ne vois pas où dans le po, le code pourrait correspondre exactement, mais les OP peuvent ne pas avoir posté la totalité de leur code.

OriginalL'auteur Bassem Zaitoun

Vous devez vous connecter pour publier un commentaire.