Element: scrollend-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das scrollend-Ereignis wird ausgelöst, wenn das Scrollen eines Elements abgeschlossen ist. Scrollen gilt als abgeschlossen, wenn die Scrollposition keine ausstehenden Updates mehr hat und der Benutzer seine Geste abgeschlossen hat.

Scrollpositions-Updates beinhalten glattes oder sofortiges Scrollen mit dem Mausrad, Scrollen mit der Tastatur, Scroll-Snap-Ereignisse oder andere APIs und Gesten, die dazu führen, dass sich die Scrollposition aktualisiert. Benutzer-Gesten wie Touch-Panning oder Trackpad-Scrollen sind erst dann abgeschlossen, wenn Zeiger oder Tasten losgelassen wurden. Wenn sich die Scrollposition nicht geändert hat, wird kein scrollend-Ereignis ausgelöst.

Um zu erkennen, wann das Scrollen innerhalb eines Dokuments abgeschlossen ist, siehe das scrollend-Ereignis von Document.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("scrollend", (event) => { })

 => { }

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}

html

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.textContent = "scroll event fired, waiting for scrollend...";
});

element.addEventListener("scrollend", (event) => {
  output.textContent = "scrollend event fired!";
});

Verwendung der `onscrollend`-Ereignishandler-Eigenschaft

Das folgende Beispiel zeigt, wie man die onscrollend-Ereignishandler-Eigenschaft verwendet, um zu erkennen, wann der Benutzer das Scrollen beendet hat:

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}

html

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element. => {
  output.textContent = "Element scroll event fired, waiting for scrollend...";
};

element. => {
  output.textContent = "Element scrollend event fired!";
};