Wie kann ich das Scrollen der Bildlaufleiste verhindern, ohne die Bildlaufleiste auszublenden?

Verhindern des Scrollens der Bildlaufleiste, ohne es auszublenden

Eine häufige Herausforderung bei der Implementierung von Leuchtkästen ist die Notwendigkeit, die Bildlaufleiste auf der übergeordneten Seite vorübergehend zu deaktivieren, ohne darauf zurückzugreifen Überlauf: versteckt;. Diese Lösung kann zu unerwünschten Sprüngen und Platzbelegung führen.

Zum Glück gibt es einen praktikablen Ansatz, Bildlaufleisten zu deaktivieren und sie trotzdem anzuzeigen. Durch die Verwendung einer festen Positionierung für Elemente unterhalb der Überlagerung ist es möglich, diesen Effekt zu erzielen. Wenn das Overlay aktiviert ist, wenden Sie die folgenden Stile auf den Text an:

body {
    position: fixed;
    overflow-y: scroll;
}

Dadurch wird die Bildlaufleiste angezeigt, ihre Funktionalität wird jedoch deaktiviert. Um diese Änderung beim Schließen des Overlays rückgängig zu machen, stellen Sie einfach die ursprünglichen Stile wieder her:

body {
    position: static;
    overflow-y: auto;
}

In Fällen, in denen auf der Seite bereits gescrollt wurde, erfassen Sie die aktuelle Scrollposition über JavaScript und legen Sie sie als oberste Eigenschaft des fest Das Body-Element stellt sicher, dass die Seite an ihrer aktuellen Bildlaufposition bleibt, wenn das Overlay aktiviert wird. Dies kann mit dem folgenden CSS und JS erreicht werden:

.noscroll {
    position: fixed;
    top: var(--st, 0);
    inline-size: 100%;
    overflow-y: scroll;
}

const b = document.body;
b.style.setProperty('--st', -(document.documentElement.scrollTop) + "px");
b.classList.add('noscroll');

Durch die Implementierung dieses Ansatzes können Sie Bildlaufleisten effektiv deaktivieren, ohne sie auszublenden, und so die gewünschte Funktionalität sowohl für die Lightbox als auch für die übergeordnete Seite beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich das Scrollen der Bildlaufleiste verhindern, ohne die Bildlaufleiste auszublenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!