Wie deaktiviere ich die Bildlaufleiste des Körpers, ohne sie auszublenden?

HTML/Body-Bildlaufleiste unter Beibehaltung der Sichtbarkeit deaktivieren

Für ein optimales Lightbox-Erlebnis kann es sinnvoll sein, die Bildlaufleiste des übergeordneten Elements vorübergehend zu deaktivieren, ohne sie auszublenden Es. Um dies zu erreichen, sollten Sie den folgenden Ansatz in Betracht ziehen:

Übergeordnetes Element korrigieren:

Wenn Sie die Lightbox öffnen, weisen Sie der Seite, die dem Overlay zugrunde liegt, die folgenden CSS-Eigenschaften zu:

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

Dadurch wird die Position der Seite festgelegt und das vertikale Scrollen auf die Seite selbst beschränkt, während die Bildlaufleiste erhalten bleibt Sichtbarkeit.

Beim Schließen der Lightbox zurücksetzen:

Stellen Sie beim Schließen der Lightbox die ursprünglichen CSS-Eigenschaften wieder her:

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

Umgang mit vorhandenen Scrollen:

Um die aktuelle Scrollposition der Seite beizubehalten, verwenden Sie JavaScript, um den scrollTop-Wert des Dokuments abzurufen Bevor Sie die Lightbox öffnen, weisen Sie diese als oberste Eigenschaft des Körperelements zu:

.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');

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Bildlaufleiste des Körpers, ohne sie auszublenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!