Tutorial
Scrollen stoppen mit jQuery
Im Netz viel gesucht und das gefunden:
.stop-scrolling {
height: 100%;
overflow: hidden;
}
$("body").addClass("stop-scrolling");
Das Problem ist, dass der Scrollbalken verschwindet und das ganze hüpft unschön!
Aber es gibt noch eine andere Möglichkeit:
.stop-scrolling {
width: 100%;
height: 100%;
position: fixed;
}
Gut, nun bleibt uns der Scrollbalken erhalten, den fügen wir dynamisch ein.
Aber jetzt klebt es oben fest und das wollen wir ja nicht.
Aber dafür gibt es eine Lösung:
var topScroll; // globale Variable
topScroll = $(window).scrollTop(); // Position nach oben
$("body").addClass("stop-scrolling");
$("body").css("margin-top",-topScroll); // nun verschieben wir das nach oben
if($( document ).height() > $( window ).height()){
$("body").css("overflow-y","scroll"); // Wenn scrollbar, Scrollbalken einfügen
}
Zum Entfernen des Effekts:
$("body").removeClass("stop-scrolling");
$("body").css("margin-top","");
$("body").css("overflow-y","");
$(window).scrollTop(topScroll);// Jetzt schieben wir es zur alten Position
Hier ein Beispiel in dem das angewendet wird:
Pop Up