Signatur
Element.scrollIntoView() / Element.scrollIntoView(alignToTop) / Element.scrollIntoView(options)
Beschreibung
Die Methode scrollIntoView() des Element-Interfaces scrollt die Vorfahren-Container des Elements so, dass das Element, auf dem scrollIntoView() aufgerufen wurde, für den Nutzer sichtbar wird.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $alignToTop | boolean | — | Ein boolescher Wert. Wenn true, wird der obere Rand des Elements am oberen Rand des sichtbaren Bereichs des scrollbaren Vorfahren ausgerichtet. Entspricht scrollIntoViewOptions: {block: "start", inline: "nearest"}. Dies ist der Standardwert. Wenn false, wird der untere Rand des Elements am unteren Rand des sichtbaren Bereichs des scrollbaren Vorfahren ausgerichtet. Entspricht scrollIntoViewOptions: {block: "end", inline: "nearest"}. |
| $options | Object | — | Ein Objekt mit den folgenden Eigenschaften: behavior (optional): Bestimmt, ob das Scrollen sofort erfolgt oder sanft animiert wird. Mögliche Werte sind smooth (sanft animiertes Scrollen), instant (Scrollen erfolgt sofort in einem einzigen Sprung) und auto (Scrollverhalten wird durch den berechneten Wert der CSS-Eigenschaft scroll-behavior auf dem Element bestimmt). Wird die Option weggelassen, ist der Standardwert auto. block (optional): Definiert die vertikale Ausrichtung des Elements innerhalb des scrollbaren Vorfahren-Containers. Mögliche Werte: start, center, end, nearest. Standard ist start. container (optional): Definiert den scrollbaren Vorfahren-Container. Mögliche Werte: all (alle scrollbaren Container sind betroffen, einschließlich Viewport) oder nearest (nur der nächstgelegene scrollbare Container ist betroffen). Standard ist all. inline (optional): Definiert die horizontale Ausrichtung des Elements innerhalb des scrollbaren Vorfahren-Containers. Mögliche Werte: start, center, end, nearest. Standard ist nearest. |
Rückgabewert
Typ
Promise
Beschreibung
Ein
Promise, das mit einem Objekt erfüllt wird, das die Eigenschaft interrupted enthält: ein boolescher Wert, der angibt, ob der Scrollvorgang unterbrochen wurde (true) oder nicht (false). Eine solche Unterbrechung tritt typischerweise auf, wenn ein programmatischer Scrollvorgang läuft und ein weiterer programmatischer Scrollvorgang auf demselben Element gestartet wird, bevor der erste beendet ist.Beispiele
Grundlegende Verwendung
const element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });Steuerung der Oben/Unten-Ausrichtung — 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" });
});Referenzen holen
const scrollIntoViewBtn = document.querySelector(".scroll-into-view");
const toolbar = document.querySelector("div");
const end = document.querySelector("#end");isInterrupted-Funktion
function isInterrupted(interrupted) {
console.log(`Scroll finished;${interrupted ? " " : " not "}interrupted`);
if (interrupted) {
alert("Scroll interrupted!");
}
}Click-Handler mit await
scrollIntoViewBtn.addEventListener("click", async () => {
toolbar.className = "fade-out";
const result = await end.scrollIntoView();
isInterrupted(result.interrupted);
toolbar.className = "fade-in";
});Feature Detection
function supportsScrollPromises() {
const test = section.scroll(0, 0);
return test instanceof Promise;
}