Dies ist die einfachste Lösung, die ich bisher bekommen habe. Und glauben Sie mir, ich habe alle anderen ausprobiert und dies ist die einfachste. Es funktioniert hervorragend auf Windows-Geräten , bei denen die Seite von rechts verschoben wird, um Platz für die System-Bildlaufleiste und für iOS-Geräte zu haben, die keinen Platz für ihre Bildlaufleisten in den Browsern benötigen. Wenn Sie dies verwenden, müssen Sie rechts keine Auffüllungen hinzufügen, damit die Seite nicht flackert, wenn Sie den Überlauf des Körpers oder HTML mit CSS verbergen .
Die Lösung ist ziemlich einfach, wenn Sie darüber nachdenken. Die Idee ist, das window.scrollTop () zu geben genau die Position zu geben, an der ein Popup geöffnet wird. Ändern Sie diese Position auch, wenn die Größe des Fensters geändert wird (da sich die Bildlaufposition ändert, sobald dies geschieht).
Auf geht's...
Erstellen Sie zunächst die Variable, die Sie darüber informiert, dass das Popup geöffnet ist, und rufen Sie stopWindowScroll auf . Wenn wir dies nicht tun, erhalten Sie einen Fehler einer undefinierten Variablen auf Ihrer Seite und setzen sie auf 0 - als nicht aktiv.
$(document).ready(function(){
stopWindowScroll = 0;
});
Lassen Sie uns jetzt die Popup-Funktion öffnen, die eine beliebige Funktion in Ihrem Code sein kann, die jedes Popup auslöst, das Sie als Plugin oder benutzerdefiniert verwenden. In diesem Fall handelt es sich um ein einfaches benutzerdefiniertes Popup mit einer einfachen Funktion zum Klicken auf Dokumente.
$(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);
});
Als nächstes erstellen wir die Funktion zum Schließen des Popups, die ich noch einmal wiederhole. Dies kann jede Funktion sein, die Sie bereits erstellt haben oder die Sie in einem Plugin verwenden. Wichtig ist, dass wir diese beiden Funktionen benötigen, um die Variable stopWindowScroll auf 1 oder 0 zu setzen und zu wissen, wann sie geöffnet oder geschlossen ist.
$(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);
});
Lassen Sie uns dann die window.scroll-Funktion erstellen, damit wir das Scrollen verhindern können, sobald der oben erwähnte stopWindowScroll auf 1 gesetzt ist - als aktiv.
$(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);
}
});
Das ist es. Damit dies funktioniert, ist kein CSS erforderlich, außer Ihren eigenen Stilen für die Seite. Das hat mir sehr gut gefallen und ich hoffe, es hilft Ihnen und anderen.
Hier ist ein Arbeitsbeispiel für JSFiddle:
JS Fiddle Beispiel
Lassen Sie mich wissen, ob dies geholfen hat. Grüße.