Wie kann ich das Scrollen deaktivieren, während die Bildlaufleiste sichtbar bleibt?

Sichtbarkeit der Bildlaufleiste beibehalten und gleichzeitig Scrollen deaktivieren

Obwohl es möglich ist, Bildlaufleisten mithilfe von overflow:hidden auszublenden, kann dieser Ansatz zu visuellen Veränderungen auf Ihrer Website führen . Wenn Sie das Scrollen deaktivieren möchten, ohne die Sichtbarkeit zu beeinträchtigen, gehen Sie wie folgt vor:

Seitenposition korrigieren:

Wenn die Seite unter der Überlagerung oben fixiert werden kann, wenden Sie an Befolgen Sie beim Öffnen des Overlays folgendes CSS:

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

Dadurch bleibt die Sichtbarkeit der Bildlaufleiste erhalten, verhindert jedoch das Scrollen des Inhalts. Um das Scrollen beim Schließen des Overlays wiederherzustellen, verwenden Sie dieses CSS:

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

Bildlaufposition beibehalten:

Wenn die Seite zuvor gescrollt wurde, erhalten Sie document.documentElement.scrollTop mit JavaScript. Weisen Sie diesen Wert dynamisch als oberste Eigenschaft des Körperelements zu. Dadurch wird die aktuelle Bildlaufposition während der gesamten Dauer des Overlays beibehalten.

CSS:

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

JS:

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

Das obige ist der detaillierte Inhalt vonWie kann ich das Scrollen deaktivieren, während die Bildlaufleiste sichtbar bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!