Prévenir les corps défilement mais autoriser superposition défilement

Question

J'ai été la recherche d'un 'lightbox' type de solution qui permet cela, mais je n'ai pas trouvé un encore (veuillez indiquer si vous en connaissez d').

Le comportement que j'essaie de recréer est juste comme ce que vous voyez à http://www.pinterest.com lorsque l'on clique sur une image.

La superposition est de défilement (comme dans l'ensemble de la superposition se déplace comme une page sur le haut d'une page), mais le corps DERRIÈRE la superposition est fixe.

J'ai essayé de créer avec juste CSS (ie. un div de superposition sur le dessus de l'ensemble de la page et puis le corps overflow: hidden) mais qui empêche la div de défilement.

Toute aide serait appréciée!!

Answer 1

TL;DR version: il suffit de regarder l'élément de la couche (et le corps) via firebug pour voir le style correspondant est activé via js. :)

En regardant pinterest site, lorsque vous ouvrez la superposition d'un noscroll classe est appliquée à l' body , afin d' overflow: hidden est activée, c' body n'est plus à défilement.

La superposition (créé à la volée ou déjà sur la page et rendu visible par display: block) a position : fixed et overflow-y: scroll, du haut, de gauche à droite et de bas à l' 0 de sorte qu'il peut remplir l'ensemble de la fenêtre d'affichage.

L' div à l'intérieur de la superposition est plutôt juste, en position: static puis la barre de défilement verticale que vous voyez est lié à l'élément. Ainsi, le contenu est scrollable, mais la superposition de demeure fixe.

Lorsque vous fermez le zoom vous cacher la superposition (via display: none) et puis vous pouvez également supprimer entièrement via javascript (ou juste le contenu à l'intérieur, cela dépend de comment vous voulez injecter le contenu) et vous devez également supprimer l' noscroll classe pour le corps (de sorte que le dépassement de la propriété revient à sa valeur initiale)

Answer 2

Si vous voulez éviter de surcharger sur ios, vous pouvez ajouter une position fixée à votre classe .noscroll

 body.noscroll{
    position:fixed;
    overflow:hidden;
}
 

Answer 3

Il est à noter que parfois ajouter "overflow: hidden" à la balise body ne fait pas l'affaire. Dans ce cas, vous devrez également ajouter la propriété à la balise html.

 body, html {
    overflow: hidden;
}
 

Answer 4

En règle générale, si vous voulez un parent (le corps dans ce cas) pour l'empêcher de défilement lorsqu'un enfant (la superposition dans ce cas) défile, puis de faire l'enfant, un frère ou une sœur de la mère pour éviter le défilement de l'évènement de remonter à la société mère. Dans le cas où le parent est le corps, cela requiert un autre élément d'habillage:

<div id="content">
</div>
<div id="overlay">
</div>

Voir Défiler particulier DIV contenu dans le navigateur principal de la barre de défilement pour voir son travail.

Answer 5

Je voudrais ajouter aux réponses précédentes parce que j'ai essayé de le faire, et une disposition s'est cassée dès que j'ai changé le corps en position: fixe. Pour éviter cela, je devais également régler la hauteur du corps à 100%:

 function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}