Element: Methoden scrollIntoView()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Die Methode scrollIntoView() der Element-Schnittstelle scrollt die Vorfahren-Container des Elements so, dass das Element, auf dem scrollIntoView() aufgerufen wird, für den Benutzer sichtbar ist.

Syntax

js
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

Parameter

alignToTop Optional

Ein boolescher Wert:

  • Wenn true, wird das obere Ende des Elements oben im sichtbaren Bereich des scrollbaren Vorfahren ausgerichtet. Entspricht scrollIntoViewOptions: {block: "start", inline: "nearest"}. Dies ist der Standardwert.
  • Wenn false, wird das untere Ende des Elements am unteren Rand des sichtbaren Bereichs des scrollbaren Vorfahren ausgerichtet. Entspricht scrollIntoViewOptions: {block: "end", inline: "nearest"}.
scrollIntoViewOptions Optional

Ein Objekt mit den folgenden Eigenschaften:

behavior Optional

Bestimmt, ob das Scrollen sofort erfolgt oder sich sanft animiert. Diese Option ist ein String, der einen der folgenden Werte haben muss:

  • smooth: scrollen soll sanft animiert werden
  • instant: scrollen soll sofort in einem einzigen Sprung erfolgen
  • auto: das Scrollverhalten wird durch den berechneten Wert von scroll-behavior bestimmt
block Optional

Definiert die vertikale Ausrichtung des Elements innerhalb des scrollbaren Vorfahren-Containers. Diese Option ist ein String und akzeptiert einen der folgenden Werte:

  • start: Richtet die obere Kante des Elements mit der oberen Kante des scrollbaren Containers aus, sodass das Element vertikal am Anfang des sichtbaren Bereichs erscheint.
  • center: Richtet das Element vertikal in der Mitte des scrollbaren Containers aus und positioniert es in der Mitte des sichtbaren Bereichs.
  • end: Richtet die untere Kante des Elements mit der unteren Kante des scrollbaren Containers aus und platziert das Element am Ende des sichtbaren Bereichs vertikal.
  • nearest: Scrollt das Element zur nächstgelegenen Kante in vertikaler Richtung. Wenn das Element näher an der oberen Kante des scrollbaren Containers ist, wird es oben ausgerichtet; wenn es näher an der unteren Kante ist, wird es unten ausgerichtet. Dies minimiert die Scrollentfernung.
  • Standardmäßig start.
inline Optional

Definiert die horizontale Ausrichtung. Einer von start, center, end oder nearest. Standardmäßig nearest.

Rückgabewert

Keiner (undefined).

Beispiele

Verwendung von scrollIntoView()

js
const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

Kontrolle der oberen/unten Ausrichtung

Standardmäßig wird das Element an der oberen (oder unteren) Kante des scrollbaren Vorfahren ausgerichtet. Um einen benutzerdefinierten Abstand zu definieren, verwenden Sie scroll-margin-top oder scroll-margin-bottom. Dies ist oft nützlich, wenn es einen festen Header auf der Seite gibt.

HTML

html
<body>
  <header class="navbar">Navbar</header>
  <main class="content">
    <button id="go-to-bottom">Go to bottom</button>
    <button id="go-to-top">Go to top</button>
  </main>
</body>

CSS

css
.navbar {
  height: 50px;
  position: sticky;
  top: 0;
  border-bottom: 1.5px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  height: 2000px;
  position: relative;
}
#go-to-bottom {
  position: absolute;
  top: 10px;
  /* Without this, the button will be aligned to the top of the page
  instead of bottom of navbar when scrolled */
  scroll-margin-top: 60px;
}
#go-to-top {
  position: absolute;
  bottom: 10px;
  scroll-margin-bottom: 0;
}

JavaScript

js
const goToTop = document.getElementById("go-to-top");
const goToBottom = document.getElementById("go-to-bottom");
goToBottom.addEventListener("click", () => {
  goToTop.scrollIntoView({ behavior: "instant", block: "end" });
});
goToTop.addEventListener("click", () => {
  goToBottom.scrollIntoView({ behavior: "instant", block: "start" });
});

Ergebnis

Spezifikationen

Specification
CSSOM View Module
# dom-element-scrollintoview

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch