Warum verschiebt sich die gesamte Seite, wenn ScrollIntoView(true) in einer Liste mit fester Position verwendet wird?

ScrollIntoView() und unbeabsichtigte Seitenbewegung

Frage:

Bei Verwendung von ScrollIntoView(true) zum Scrollen eines Elements Warum wird in einer Liste mit fester Position die gesamte Seite verschoben? leicht?

Kontext:

Eine Liste mit fester Position (#listOfDivs) wird über AJAX in Safari auf ein mobiles Gerät geladen. Die Verwendung von ScrollIntoView(false) für das Scrollen nach unten funktioniert wie erwartet, aber ScrollIntoView(true) für das Scrollen nach oben führt dazu, dass die gesamte Seite verschoben wird.

Struktur:

#listOfDivs {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div>

Antwort:

Das Standardverhalten von ScrollIntoView(true) dient dazu, das Element vom oberen Rand des Ansichtsfensters in die Ansicht zu scrollen. Um zu verhindern, dass sich die gesamte Seite verschiebt, geben Sie die Verhaltensoption als „Glatt“, die Blockoption als „Nächste“ und die Inline-Option als „Start“ an:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

Dokumentation:

Weitere Informationen zur ScrollIntoView-Methode finden Sie in der Dokumentation des Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Das obige ist der detaillierte Inhalt vonWarum verschiebt sich die gesamte Seite, wenn ScrollIntoView(true) in einer Liste mit fester Position verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!