Ich habe eine Overlay-Box, die fest und zentriert auf dem Bildschirm ist. Die Seite selbst ist ziemlich lang und hat eine vertikale Bildlaufleiste.
Ich möchte das Scrollen der Seite selbst deaktivieren, sobald das Overlay angezeigt wird. Ich kann Scroll jedoch nicht vollständig deaktivieren, da einige Overlays overflow-y:scroll für sich selbst haben. Also sollte der Inhalt in der Überlagerung gescrollt werden, aber die Seite selbst sollte stecken bleiben.
Irgendeine Idee, wie man das mit jquery oder css löst?
Nur eine Anpassung an Marcs jQuery-Lösung. Mein Code deaktiviert den Body-Bildlauf, wenn die Überlagerung angezeigt wird. Wenn Sie dann auf die Schaltfläche zum Schließen von Body oder Overlay klicken, wird der Body-Bildlauf wieder aktiviert.
%Vor%Hier ist ein kleines JSFiddle meines Skripts in Aktion.
Sie können Ihr Overlay als {position: fixed;} positionieren. Das wird Ihr Overlay auf Ihrem Bildschirm behalten , auch wenn Ihre Seite scrollt.
Sie können einen Container mit voller Breite und voller Höhe mit position: fixed erstellen. Und innerhalb dieses Containers erstellen Sie Ihr aktuelles Overlay mit Informationen. Der Container blendet den Benutzer im Grunde davor aus, mit der Seite zu scrollen oder zu interagieren.
Tags und Links javascript html jquery css scroll