C'est la solution la plus simple que j'ai eu jusqu'à présent. Et croyez-moi, j'ai essayé tous les autres et c'est le plus simple. Cela fonctionne très bien sur les appareils Windows , ce qui pousse la page de droite pour avoir de la place pour la barre de défilement du système et les appareils IOS qui ne nécessitent pas d'espace pour leurs barres de défilement dans les navigateurs. Donc, en utilisant cela, vous n'aurez pas besoin d'ajouter de rembourrage à droite pour que la page ne scintille pas lorsque vous masquez le débordement du corps ou du HTML avec CSS .
La solution est assez simple si vous y réfléchissez. L'idée est de donner à window.scrollTop () la même position exacte au moment où une popup est ouverte. Modifiez également cette position lorsque la fenêtre se redimensionne (car la position de défilement change une fois que cela se produit).
Alors c'est parti ...
Créons d'abord la variable qui vous fera savoir que la fenêtre contextuelle est ouverte et appelez-la stopWindowScroll . Si nous ne le faisons pas, vous obtiendrez une erreur d'une variable non définie sur votre page et définissez-la sur 0 - comme non active.
$(document).ready(function(){
stopWindowScroll = 0;
});
Permet maintenant de créer la fonction popup ouverte qui peut être n'importe quelle fonction de votre code qui déclenche la popup que vous utilisez en tant que plugin ou personnalisé. Dans ce cas, ce sera une simple fenêtre contextuelle personnalisée avec un simple document sur la fonction de clic.
$(document).on('click','.open-popup', function(){
// Saving the scroll position once opening the popup.
stopWindowScrollPosition = $(window).scrollTop();
// Setting the stopWindowScroll to 1 to know the popup is open.
stopWindowScroll = 1;
// Displaying your popup.
$('.your-popup').fadeIn(300);
});
Donc, la prochaine chose que nous faisons est de créer la fonction close popup, qui, je le répète, peut être n'importe quelle fonction que vous avez déjà créée ou que vous utilisez dans un plugin. L'important est que nous avons besoin de ces 2 fonctions pour définir la variable stopWindowScroll sur 1 ou 0 pour savoir quand elle est ouverte ou fermée.
$(document).on('click','.open-popup', function(){
// Setting the stopWindowScroll to 0 to know the popup is closed.
stopWindowScroll = 0;
// Hiding your popup
$('.your-popup').fadeOut(300);
});
Permet ensuite de créer la fonction window.scroll afin que nous puissions empêcher le défilement une fois que stopWindowScroll mentionné ci-dessus est défini sur 1 - comme actif.
$(window).scroll(function(){
if(stopWindowScroll == 1) {
// Giving the window scrollTop() function the position on which
// the popup was opened, this way it will stay in its place.
$(window).scrollTop(stopWindowScrollPosition);
}
});
C'est ça. Aucun CSS requis pour que cela fonctionne, sauf vos propres styles pour la page. Cela a fonctionné comme un charme pour moi et j'espère que cela vous aide, vous et les autres.
Voici un exemple de travail sur JSFiddle:
Exemple JS Fiddle
Faites-moi savoir si cela a aidé. Cordialement.