Window: scrollBy() Methode

Syntax

scrollBy(xCoord, yCoord)
scrollBy(options)

Parameter

xCoord

Der horizontale Pixelwert, um den Sie scrollen mchten.

yCoord

Der vertikale Pixelwert, um den Sie scrollen mchten.

options

Ein Objekt, das die folgenden Eigenschaften enthlt:

top Optional

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

left Optional

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

behavior Optional

Bestimmt, ob das Scrollen sofort erfolgt oder sanft animiert wird. Diese Option ist ein String, der einen der folgenden Werte annehmen 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.

Wird behavior weggelassen, ist der Standardwert auto.

Rckgabewert

Ein Promise, das mit einem Objekt erfllt wird, das die folgende Eigenschaft enthlt:

interrupted

Ein boolescher Wert, der angibt, ob der Scrollvorgang unterbrochen wurde (true) oder nicht (false). Eine solche Unterbrechung tritt typischerweise auf, wenn ein programmatischer Scrollvorgang in Gang ist und ein weiterer programmatischer Scrollvorgang auf dem Fenster initiiert wird, bevor der erste abgeschlossen ist.

Beispiele

Grundlegende Verwendung

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

Unsere Fenstermethoden-Demo (Quellcode ansehen) zeigt, wie der Promise-Rckgabewert von scrollBy() verwendet werden kann, um auf das Ende eines Scrollvorgangs zu reagieren. Diese Technik ist hauptschlich in Fllen ntzlich, in denen das Scrollen ber die Zeit hinweg sanft erfolgt (erreicht durch die Einstellung der behavior-Option auf smooth oder durch das Setzen der scroll-behavior-Eigenschaft des Scroll-Elements auf smooth).

HTML

Unser HTML enthlt mehrere Abstze Inhalt und ein <div>-Element-Toolbar mit <button>-Elementen, die verschiedene Scrollvorgnge im Fenster auslsen.

<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 Scrollvorgnge ber die Zeit hinweg sanft 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, sodass sie sanft aus- oder eingeblendet wird. Wir definieren auch @keyframes-Blcke, um die erforderlichen opacity-nderungen fr 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 aus Grnden der Krze nicht angezeigt.

JavaScript

Wir beginnen damit, Referenzen auf die <button>, die den scrollBy()-Vorgang ausfhren, und die Toolbar-<div> zu erfassen:

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

Als Nchstes definieren wir eine Funktion namens isInterrupted(), die als Reaktion darauf ausgefhrt wird, dass ein Scrollvorgang endet und die einen booleschen interrupted-Wert als Parameter nimmt. Sie protokolliert eine Nachricht in der Konsole, um zu sagen, dass das Scrollen beendet ist und ob der Vorgang unterbrochen wurde (interrupted ist true) oder nicht. Auerdem wird, falls interrupted true ist, ein alert() ausgefhrt, um die Unterbrechung deutlich anzuzeigen.

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

Wenn die Schaltflche geklickt wird, wenden wir sofort die fade-out-Klasse auf die Toolbar an, sodass sie ausblendet. Danach fhren wir scrollBy(0, 200) auf dem Fenster aus, um dessen Inhalt um 200 Pixel nach unten zu scrollen, warten auf die Auflsung des Promises und speichern das result in einer Konstante. Wenn das Promise aufgelst wurde, nennen wir isInterrupted(), um zu melden, dass der Scrollvorgang abgeschlossen ist und ob er unterbrochen wurde. Schlielich 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 nicht relevante Code fr scrollBy() wird aus Grnden der Krze nicht angezeigt.

Ergebnis

Klicken Sie auf die Schaltflchen, um das Scrollverhalten zu sehen. Beachten Sie, wie sich die Toolbar ausblendet, wenn eine Schaltflche gedrckt wird, und sich wieder einblendet, sobald das sanfte Scrollen beendet ist. Versuchen Sie auch, eine Schaltflche zu drcken und schnell eine andere Schaltflche zu drcken, bevor der erste Scrollvorgang beendet ist. Beachten Sie, wie in diesen Fllen das Scrollen als unterbrochen gemeldet wird.

Sie knnen das Demo auch in einem separaten Tab laden und den Quellcode ansehen.

Hinweis zur Funktionserkennung

Wenn Sie dieses Beispiel in einem Browser ausfhren, der keine Promise-zurckgebenden Scrollvorgnge untersttzt, sind die Scrollvorgnge zwar immer noch sanft, aber die Toolbar blendet sich nicht aus und dann wieder ein, sobald der Vorgang abgeschlossen ist. Die Funktionserkennung wird von einer Funktion namens supportsScrollPromises() behandelt, die einen Scrollvorgang ausfhrt und testet, ob dessen Rckgabewert ein Promise ist:

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

Schauen Sie sich den Quellcode an, um zu sehen, wie die Funktionserkennung verwendet wird.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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