Element: scroll() Methode

Die scroll() Methode der Element Schnittstelle scrollt zu einem bestimmten Satz von Koordinaten innerhalb eines gegebenen Elements.

Syntax

scroll(xCoord, yCoord)
scroll(options)

Parameter

xCoord

Das Pixel entlang der horizontalen Achse des Elements, das Sie in der oberen linken Ecke angezeigt haben möchten.

yCoord

Das Pixel entlang der vertikalen Achse des Elements, das Sie in der oberen linken Ecke angezeigt haben möchten.

options

Ein Objekt, das die folgenden Eigenschaften enthält:

top Optional

Gibt die Anzahl der Pixel entlang der Y-Achse an, um die das Fenster oder Element gescrollt werden soll.

left Optional

Gibt die Anzahl der Pixel entlang der X-Achse an, um die das Fenster oder Element gescrollt werden soll.

behavior Optional

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

• smooth: Das Scrollen wird sanft animiert.
• instant: Das Scrollen erfolgt sofort in einem einzigen Sprung.
• auto: Das Scrollverhalten wird durch den berechneten Wert der scroll-behavior CSS-Eigenschaft des Elements bestimmt.

Wenn weggelassen, ist der Standardwert von behavior auto.

Rückgabewert

Ein Promise, das mit einem Objekt erfüllt wird, das die folgende Eigenschaft enthält:

interrupted

Ein boolescher Wert, der anzeigt, ob die Scroll-Operation unterbrochen wurde (true) oder nicht (false). Eine solche Unterbrechung tritt typischerweise auf, wenn ein programmatisches Scrollen im Gange ist und ein weiteres programmatisches Scrollen auf demselben Element initiiert wird, bevor das erste abgeschlossen ist.

Beispiele

Grundlegende Nutzung

// Put the 1000th vertical pixel at the top of the element
element.scroll(0, 1000);

Verwendung von options:

element.scroll({
 top: 100,
 left: 100,
 behavior: "smooth",
});

Reagieren auf das Ende des Scrollen

Unser Demo zu Elementmethoden (siehe Quellcode) zeigt, wie der Promise-Rückgabewert von scroll() verwendet werden kann, um auf das Ende einer Scroll-Operation zu reagieren. Diese Technik ist vor allem in Fällen nützlich, in denen das Scrollen sanft über die Zeit erfolgt (erreicht durch Festlegen der behavior Option auf smooth oder durch Setzen der scroll-behavior Eigenschaft des scrollenden Elements auf smooth).

HTML

Unser HTML enthält ein <section> Element, das mehrere Absatzinhalte und ein <div> Element Werkzeugleiste mit <button> Elementen enthält, die verschiedene Scroll-Operationen im <section> auslösen.

<div>
 <button class="scroll">scroll() to 1000</button>
 <button class="scrollto">scrollTo() top</button>
 <button class="scrollby">scrollBy() 200</button>
 <button class="scrollintoview">Scroll last &lt;p&gt; into view</button>
</div>
<section>...</section>

CSS

Wir geben dem <section> Element eine feste height und einen overflow-y Wert von scroll, damit es vertikal scrollt, und setzen seine scroll-behavior Eigenschaft auf smooth, so dass alle Scroll-Operationen sanft über die Zeit anstatt sofort animiert werden.

section {
 border: 1px solid black;
 padding: 20px;
 margin-top: 60px;
 height: 500px;
 overflow-y: scroll;
 scroll-behavior: smooth;
}

Wir erstellen auch zwei Klassenselektoren; wenn eine fade-out oder fade-in Klasse auf ein Element angewendet wird, wird eine animation angewendet, so dass es sanft ausblendet oder einblendet. Darüber hinaus definieren wir @keyframes Blöcke, um die erforderlichen opacity Änderungen für diese Animationen zu definieren.

.fade-out {
 animation: fade-out 0.3s linear both;
}
.fade-in {
 animation: fade-in 0.3s linear both;
}
@keyframes fade-out {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}
@keyframes fade-in {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

Der Rest des CSS wird der Kürze halber nicht angezeigt.

JavaScript

Wir beginnen damit, Referenzen auf das <button>, das die scroll() Operation ausführt, die Werkzeugleiste <div>, und das scrollende <section> zu holen:

const scrollBtn = document.querySelector(".scroll");
const toolbar = document.querySelector("div");
const section = document.querySelector("section");

Als Nächstes definieren wir eine Funktion namens isInterrupted(), die aufgerufen wird, wenn eine Scroll-Operation beendet ist und einen booleschen interrupted Wert als Parameter nimmt. Sie protokolliert eine Nachricht in der Konsole, die besagt, dass das Scrollen abgeschlossen ist, und gibt an, ob die Operation unterbrochen wurde (interrupted ist true) oder nicht. Zusätzlich, wenn interrupted true ist, wird ein alert() aufgerufen, um die Unterbrechung deutlich anzuzeigen.

function isInterrupted(interrupted) {
 console.log(`Scroll finished;${interrupted ? " " : " not "}interrupted`);
 if (interrupted) {
 alert("Scroll interrupted!");
 }
}

Wenn der Button geklickt wird, wenden wir sofort die fade-out Klasse auf die Werkzeugleiste an, wodurch sie ausblendet. Dann führen wir scroll(0, 1000) auf dem <section> durch, um seinen Inhalt um 1000 Pixel herunterzuscrollen, und awaiten die Auflösung ihres Promises, während wir dies tun, und speichern das result in einer Konstante. Wenn das Promise aufgelöst wurde, rufen wir isInterrupted() auf, um zu melden, dass die Scroll-Operation beendet ist und ob sie unterbrochen wurde. Schließlich wenden wir die fade-in Klasse auf die Werkzeugleiste an, wodurch sie wieder einblendet.

scrollBtn.addEventListener("click", async () => {
 toolbar.className = "fade-out";
 const result = await section.scroll(0, 1000);
 isInterrupted(result.interrupted);
 toolbar.className = "fade-in";
});

Der für scroll() nicht relevante Code wird der Kürze halber nicht gezeigt.

Ergebnis

Klicken Sie die Buttons, um das Scroll-Verhalten zu sehen. Beachten Sie, wie die Werkzeugleiste ausblendet wenn ein Button gedrückt wird, und wieder einblendet, sobald das sanfte Scrollen abgeschlossen ist. Versuchen Sie auch, einen Button zu drücken und dann schnell einen weiteren, bevor die erste Scroll-Operation abgeschlossen ist. Beachten Sie, wie in diesen Fällen das Scrollen als unterbrochen gemeldet wird.

Sie können auch das Demo in einem separaten Tab laden und den Quellcode ansehen.

Hinweis zur Funktionsprüfung

Wenn Sie dieses Beispiel in einem Browser ausführen, der keine Promise zurückgebenden Scroll-Operationen unterstützt, sind die Scroll-Operationen weiterhin sanft, aber die Werkzeugleiste blendet nicht aus und dann wieder ein, wenn die Operation beendet ist. Die Funktionsprüfung wird von einer Funktion namens supportsScrollPromises() durchgeführt, die eine Scroll-Operation ausführt und prüft, ob ihr Rückgabewert ein Promise ist:

function supportsScrollPromises() {
 const test = section.scroll(0, 0);
 return test instanceof Promise;
}

Schauen Sie sich den Quellcode an, um zu sehen, wie die Funktionsprüfung verwendet wird.

Spezifikationen

Browser-Kompatibilität