Element: scrollIntoView() Methode

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 scrollIntoView()-Methode des Element-Interfaces scrollt die Vorfahren-Container des Elements, sodass 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 die Oberseite des Elements mit der Oberseite des sichtbaren Bereichs des scrollbaren Vorfahren ausgerichtet. Entspricht scrollIntoViewOptions: {block: "start", inline: "nearest"}. Dies ist der Standardwert.
  • Wenn false, wird die Unterseite des Elements mit der Unterseite 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 oder sanft animiert erfolgt. Diese Option ist ein String, der einen der folgenden Werte annehmen muss:

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

Definiert die vertikale Ausrichtung. Einer von start, center, end oder nearest. Standard ist start.

inline Optional

Definiert die horizontale Ausrichtung. Einer von start, center, end oder nearest. Standard ist 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" });

Steuerung der Ausrichtung oben/unten

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