Fenster: scrollBy() Methode

Syntax

scrollBy(xCoord, yCoord)
scrollBy(options)

Parameter

xCoord

Der horizontale Pixelwert, um den Sie scrollen möchten.

yCoord

Der vertikale Pixelwert, um den Sie scrollen möchten.

options

Ein Objekt mit den folgenden Eigenschaften:

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 animiert erfolgt. Diese Option ist ein String, der einen der folgenden Werte annehmen muss:

• smooth: Das Scrollen animiert sich reibungslos.
• instant: Das Scrollen erfolgt sofort in einem Sprung.
• auto: Das Scrollverhalten wird durch den berechneten Wert der scroll-behavior CSS-Eigenschaft auf dem Element bestimmt.

Wenn weggelassen, ist der Standardwert von behavior auto.

Rückgabewert

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

interrupted

Ein boolescher Wert, der angibt, ob der Scrollvorgang unterbrochen wurde (true) oder nicht (false). Eine solche Unterbrechung geschieht typischerweise, wenn ein programmatisches Scrollen im Gange ist und ein weiteres programmatisches Scrollen im Fenster initiiert wird, bevor das erste beendet ist.

Beispiele

Grundlegende Nutzung

Um eine Seite nach unten zu scrollen:

window.scrollBy(0, window.innerHeight);

Um nach oben zu scrollen:

window.scrollBy(0, -window.innerHeight);

Verwendung von options:

window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});

Reagieren auf das Ende des Scrollens

Unser Demo zu Fenstermethoden (siehe Quellcode) demonstriert, wie der Rückgabewert von scrollBy() als Promise verwendet werden kann, um auf das Ende eines Scrollvorgangs zu reagieren. Diese Technik ist vor allem nützlich in Fällen, in denen das Scrollen reibungslos über die Zeit erfolgt (erreicht durch Setzen der behavior Option auf smooth oder durch Setzen der scroll-behavior Eigenschaft des scrolling Elements auf smooth).

HTML

Unser HTML enthält mehrere Absätze von Inhalten und ein <div> Element Toolbar mit <button> Elementen, die verschiedene Scrolloperationen im Fenster auslösen.

<div>
  <button class="scroll">scroll() to 1000</button>
  <button class="scroll-to">scrollTo() top</button>
  <button class="scroll-by">scrollBy() 200</button>
</div>

<p>...</p>

<p>...</p>

...

CSS

Wir geben dem :root Element einen Wert der scroll-behavior Eigenschaft von smooth, sodass alle Scrolloperationen über die Zeit hinweg animiert werden anstatt sofort zu erfolgen.

:root {
  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, damit es sanft ausblendet oder einblendet. Wir definieren auch @keyframes Blöcke, um die erforderlichen Änderungen der opacity 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 restliche CSS-Code wird aus Gründen der Kürze nicht angezeigt.

JavaScript

Wir beginnen damit, Referenzen zum <button>, das die scrollBy() Operation ausführt, und zur Toolbar <div> zu holen:

const scrollByBtn = document.querySelector(".scroll-by");
const toolbar = document.querySelector("div");

Als nächstes definieren wir eine Funktion namens isInterrupted(), die als Reaktion auf den Abschluss eines Scrollvorgangs ausgeführt wird und einen booleschen Wert interrupted als Parameter nimmt. Sie protokolliert eine Nachricht in der Konsole, dass das Scrollen abgeschlossen ist und angibt, ob der Vorgang unterbrochen wurde (interrupted ist true) oder nicht. Zusätzlich, wenn interrupted true ist, wird alert() aufgerufen, um die Unterbrechung klar anzuzeigen.

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

Wenn die Schaltfläche angeklickt wird, wenden wir sofort die fade-out Klasse auf die Toolbar an, was dazu führt, dass sie ausblendet. Wir führen dann scrollBy(0, 200) im Fenster aus, um dessen Inhalt um 200 Pixel nach unten zu scrollen, warten auf die Auflösung des zugehörigen Promises und speichern das result in einer Konstante. Wenn das Promise aufgelöst wurde, rufen wir isInterrupted() auf, um zu melden, dass der Scrollvorgang abgeschlossen ist und ob er unterbrochen wurde. Schließlich wenden wir die fade-in Klasse auf die Toolbar an, wodurch sie wieder eingeblendet wird.

scrollByBtn.addEventListener("click", async () => {
  toolbar.className = "fade-out";
  const result = await window.scrollBy(0, 200);
  isInterrupted(result.interrupted);
  toolbar.className = "fade-in";
});

Der für scrollBy() nicht relevante Code wird aus Gründen der Kürze nicht angezeigt.

Ergebnis

Klicken Sie auf die Schaltflächen, um das Scrollverhalten zu sehen. Beachten Sie, wie die Toolbar ausblendet, wenn eine Schaltfläche gedrückt wird, und wieder einblendet, sobald das reibungslose Scrollen beendet ist. Versuchen Sie auch, eine Schaltfläche zu drücken und dann schnell eine andere Schaltfläche zu drücken, bevor der erste Scrollvorgang abgeschlossen ist. Beachten Sie, wie in diesen Fällen das Scrollen als unterbrochen gemeldet wird.

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

Anmerkung zur Feature-Erkennung

Wenn Sie dieses Beispiel in einem Browser ausführen, der Scroll-Operationen, die ein Promise zurückgeben, nicht unterstützt, sind die Scroll-Operationen weiterhin reibungslos, aber die Toolbar blendet nicht aus und wieder ein, sobald der Vorgang abgeschlossen ist. Die Feature-Erkennung wird von einer Funktion namens supportsScrollPromises() gehandhabt, die einen Scrollvorgang ausführt und testet, ob sein Rückgabewert ein Promise ist:

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

Sehen Sie sich den Quellcode an, um zu sehen, wie die Feature-Erkennung verwendet wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Window.scroll()
• Window.scrollTo()
• Element.scrollBy()
• Window.scrollByLines()
• Window.scrollByPages()