Wie man überprüft ob ein Element im Viewport ist (JS / TypeScript)

Als Webentwickler müssen wir oft dynamische Effekte zu unseren Websites hinzufügen, um die Benutzererfahrung zu verbessern. Ein solcher Effekt ist die Anzeige der Scroll-Entfernung eines Elements, wenn es im Viewport sichtbar ist. In diesem Blog-Beitrag werden wir einen Codeausschnitt untersuchen, der überprüft, ob ein Element im Viewport sichtbar ist und wenn ja, zeigt er seine Scroll-Entfernung in Prozent an.

/**
 * check if element is partially or fully in viewport
 * @param {Element} el
 * @returns {boolean}
 */
function isInViewport(el: Element) {
  const rect = el.getBoundingClientRect();

  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.bottom >= 0
  );
}

Beginnen wir damit, die Funktion isInViewport zu verstehen. Diese Funktion nimmt ein Element als Parameter an und gibt einen booleschen Wert zurück, der angibt, ob das Element teilweise oder vollständig im Viewport sichtbar ist. Die Funktion verwendet die getBoundingClientRect-Methode, um die Größe und Position des Elements relativ zum Viewport zu erhalten. Die Funktion überprüft dann, ob die obere Position des Elements kleiner als oder gleich der Viewport-Höhe ist und ob die untere Position des Elements größer als oder gleich Null ist. Wenn beide Bedingungen zutreffen, gibt die Funktion true zurück und gibt an, dass sich das Element im Viewport befindet.

/**
 * get scrolled distance in percentage
 * @param {HTMLElement} el
 * @returns {number}
 */
function getScrolledPercentage(el: Element) {
  const rect = el.getBoundingClientRect();
  const windowHeight =
    window.innerHeight || document.documentElement.clientHeight;
  const scrollHeight = window.pageYOffset || document.documentElement.scrollTop;
  const elementTop = rect.top + scrollHeight;
  const elementBottom = elementTop + el.clientHeight;
  const scrolledDistance = elementBottom - scrollHeight;
  const totalDistance = el.clientHeight + windowHeight;
  const scrolledPercentage =
    (scrolledDistance / totalDistance) * 100 * -1 + 100;

  return scrolledPercentage;
}

Die Funktion getScrolledPercentage wird verwendet, um den Prozentsatz des Elements zu berechnen, der gescrollt wurde. Diese Funktion nimmt ein Element als Parameter an und gibt den gescrollten Prozentsatz zurück. Um den gescrollten Prozentsatz zu berechnen, verwendet die Funktion zunächst die getBoundingClientRect-Methode, um die Größe und Position des Elements relativ zum Viewport zu erhalten. Anschließend berechnet sie die Höhe des Fensters und die aktuelle Scroll-Höhe. Unter Verwendung dieser Informationen berechnet die Funktion die obere und untere Position des Elements relativ zum Dokument. Dann berechnet sie die gescrollte Entfernung, indem sie die Scroll-Höhe von der unteren Position des Elements abzieht. Schließlich berechnet sie die Gesamtentfernung, indem sie die Höhe des Fensters und die Höhe des Elements addiert und berechnet den gescrollten Prozentsatz als Prozentsatz der Gesamtentfernung.

tilesScrollEffect();
document.addEventListener("scroll", (e) => {
  tilesScrollEffect();
});

function tilesScrollEffect() {
  const tiles = document.querySelectorAll(".tile");
  tiles.forEach((tile) => {
    if (isInViewport(tile)) {
      // get scrolled distance with getScrolledDistance function
      const scrolledDistance = getScrolledPercentage(tile);

      tile.innerHTML =
        "Scrolled Distance: " + scrolledDistance.toFixed(2) + " %";
    }
  });
}

Nun schauen wir uns die Funktion tilesScrollEffect an. Diese Funktion ist dafür verantwortlich, die Scroll-Entfernung jedes .tile-Elements zu aktualisieren, das im Viewport sichtbar ist. Sie ruft zuerst alle .tile-Elemente mit der Methode querySelectorAll ab. Dann durchläuft sie jede Kachel und prüft mithilfe der Funktion isInViewport, ob sie im Viewport sichtbar ist. Wenn die Kachel im Viewport sichtbar ist, ruft die Funktion die Funktion getScrolledPercentage auf, um die gescrollte Entfernung in Prozent zu berechnen. Schließlich aktualisiert die Funktion die HTML der Kachel, um die gescrollte Entfernung in Prozent anzuzeigen, indem sie die innerHTML-Eigenschaft verwendet.

Zuletzt fügt der Code einen Ereignislistener zum document-Objekt hinzu, um auf das scroll-Ereignis zu hören. Wenn der Benutzer die Seite scrollt, wird die Funktion tilesScrollEffect aufgerufen, um die Scroll-Entfernung jedes .tile