Voici ma solution que j'ai utilisée dans les applications.
J'ai désactivé le débordement de corps et placé le html du site Web entier dans les div de conteneurs. Les conteneurs du site Web ont un débordement et l'utilisateur peut donc faire défiler la page comme prévu.
J'ai ensuite créé un div frère (#Prevent) avec un z-index plus élevé qui couvre l'ensemble du site Web. Comme #Prevent a un z-index plus élevé, il chevauche le conteneur du site Web. Lorsque #Prevent est visible, la souris ne survole plus les conteneurs du site Web, le défilement n'est donc pas possible.
Vous pouvez bien sûr placer un autre div, tel que votre modal, avec un z-index supérieur à #Prevent dans le balisage. Cela vous permet de créer des fenêtres pop-up qui ne souffrent pas de problèmes de défilement.
Cette solution est meilleure car elle ne cache pas les barres de défilement (effet de saut). Il ne nécessite pas d'écouteurs d'événements et est facile à mettre en œuvre. Cela fonctionne dans tous les navigateurs, bien qu'avec IE7 et 8, vous devez jouer (dépend de votre code spécifique).
html
<body>
<div id="YourModal" style="display:none;"></div>
<div id="Prevent" style="display:none;"></div>
<div id="WebsiteContainer">
<div id="Website">
website goes here...
</div>
</div>
</body>
css
body { overflow: hidden; }
#YourModal {
z-index:200;
/* modal styles here */
}
#Prevent {
z-index:100;
position:absolute;
left:0px;
height:100%;
width:100%;
background:transparent;
}
#WebsiteContainer {
z-index:50;
overflow:auto;
position: absolute;
height:100%;
width:100%;
}
#Website {
position:relative;
}
jquery / js
function PreventScroll(A) {
switch (A) {
case 'on': $('#Prevent').show(); break;
case 'off': $('#Prevent').hide(); break;
}
}
désactiver / activer le défilement
PreventScroll('on'); // prevent scrolling
PreventScroll('off'); // allow scrolling