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 January 2020.

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

Syntax

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

Parameter

alignToTop Optional

Ein boolescher Wert:

Wenn true, wird die Oberkante des Elements an der Oberkante des sichtbaren Bereichs des scrollbaren Vorfahren ausgerichtet. Entspricht scrollIntoViewOptions: {block: "start", inline: "nearest"}. Dies ist der Standardwert.
Wenn false, wird die Unterkante des Elements an der Unterkante des sichtbaren Bereichs des scrollbaren Vorfahren ausgerichtet. Entspricht scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions Optional Experimentell

Ein Objekt mit 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: Scrollen sollte sanft animieren
instant: Scrollen sollte sofort in einem einzigen Sprung erfolgen
auto: Scrollverhalten wird durch den berechneten Wert von scroll-behavior bestimmt

block Optional

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

start: Richtet die Oberkante des Elements an der Oberkante des scrollbaren Containers aus und macht das Element am Anfang des sichtbaren Bereichs vertikal sichtbar.
center: Richtet das Element vertikal in der Mitte des scrollbaren Containers aus und positioniert es in der Mitte des sichtbaren Bereichs.
end: Richtet die Unterkante des Elements an der Unterkante 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 Oberkante des scrollbaren Containers ist, wird es nach oben ausgerichtet; wenn es näher an der Unterkante ist, wird es nach unten ausgerichtet. Dies minimiert die Scrollstrecke.
Standardmäßig start.

inline Optional

Definiert die horizontale Ausrichtung des Elements innerhalb des scrollbaren Vorfahrencontainers. Diese Option ist ein String und akzeptiert einen der folgenden Werte:

start: Richtet die linke Kante des Elements an der linken Seite des scrollbaren Containers aus und macht das Element am Anfang des sichtbaren Bereichs horizontal sichtbar.
center: Richtet das Element horizontal in der Mitte des scrollbaren Containers aus und positioniert es in der Mitte des sichtbaren Bereichs.
end: Richtet die rechte Kante des Elements an der rechten Seite des scrollbaren Containers aus und platziert das Element am Ende des sichtbaren Bereichs horizontal.
nearest: Scrollt das Element zur nächstgelegenen Kante in horizontaler Richtung. Wenn das Element näher an der linken Kante des scrollbaren Containers ist, wird es nach links ausgerichtet; wenn es näher an der rechten Kante ist, wird es nach rechts ausgerichtet. Dies minimiert die Scrollstrecke.
Standardmäßig nearest.

Beispiele

Verwendung von scrollIntoView()

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 Ober- (oder Unter-)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 eine feste Kopfzeile 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

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

Siehe auch

Element.scrollIntoViewIfNeeded() Nicht standardisiert