Wie kann ich Bildlaufleisten in der Webentwicklung deaktivieren, ohne sie auszublenden?

Bildlaufleisten deaktivieren, ohne sie auszublenden

In der Webentwicklung ist es gelegentlich erforderlich, Bildlaufleisten an einem übergeordneten Element zu deaktivieren, während eine Lightbox verwendet wird. Allerdings ist es oft unerwünscht, die Bildlaufleisten mithilfe von „overflow:hidden“ einfach auszublenden, da dies dazu führen kann, dass die Website springt und den Platz einnimmt, an dem sich die Bildlaufleiste befand.

Es gibt eine praktikable Lösung, die es ermöglicht, Bildlaufleisten zu deaktivieren, während sie weiterhin angezeigt werden ihnen. Wenn die Seite unter der Lightbox oben positioniert werden kann, können Sie den folgenden CSS-Code verwenden:

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

Dadurch wird die Bildlaufleiste angezeigt, aber verhindert, dass der Inhalt gescrollt wird. Um die Bildlaufleisten nach dem Schließen der Lightbox wiederherzustellen, setzen Sie einfach diese Eigenschaften zurück:

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

Dieser Ansatz erfordert keine Änderung der Bildlaufereignisse.

Adressierung bereits vorhandener Bildlaufpositionen

Wenn die Seite bereits gescrollt ist, bevor die Lightbox geöffnet wird, können Sie die aktuelle Scrollposition über JavaScript abrufen und als oberste Eigenschaft von zuweisen das Körperelement. Dadurch bleibt die aktuelle Scrollposition während der Lightbox-Nutzung erhalten.

CSS

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

JavaScript

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

Von Durch die Implementierung dieser Lösung können Sie Bildlaufleisten effektiv deaktivieren, ohne sie auszublenden, und so die beabsichtigte visuelle Darstellung Ihrer Webseite beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich Bildlaufleisten in der Webentwicklung deaktivieren, ohne sie auszublenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!