So verwenden Sie JS, um zu überprüfen, ob sich ein Element im Ansichtsfenster befindet

Vorwort

Teilen Sie zwei Methoden, um zu überwachen, ob sich ein Element im Ansichtsfenster befindet

1. Positionsberechnung

Verwenden Sie die Methode Element.getBoundingClientRect(), um die Position des Elements relativ zum Ansichtsfenster zurückzugeben

const isElementVisible = (el) => {
 const rect = el.getBoundingClientRect();
};

Ermitteln Sie die Breite und Höhe des Browserfensters

const isElementVisible = (el) => {
 const rect = el.getBoundingClientRect();
  const vWidth = window.innerWidth || document.documentElement.clientWidth;
  const vHeight = window.innerHeight || document.documentElement.clientHeight;
};

Bestimmen Sie, ob sich das Element im Ansichtsfenster befindet, wie in der Abbildung gezeigt

const isElementVisible = (el) => {
  const rect = el.getBoundingClientRect()
  const vWidth = window.innerWidth || document.documentElement.clientWidth
  const vHeight = window.innerHeight || document.documentElement.clientHeight

  
  Wenn (
    rechteck.rechts < 0 ||
    Rechteck unten < 0 ||
    Rechteck.links > vBreite ||
    rechteck.oben > vHöhe
  ) {
    return false
  }

  returniere wahr
}

Die Methode getBoundingClientRect führt zu einem Neufluss und Neuzeichnen des Browsers, was etwas mehr Leistung verbraucht, aber eine bessere Kompatibilität als Intersection Observer bietet.

2. Kreuzungsbeobachter

Die Intersection Observer API bietet eine Möglichkeit, Änderungen an der Schnittmenge eines Zielelements mit einem Vorgängerelement oder mit dem Ansichtsfenster eines Dokuments der obersten Ebene asynchron zu beobachten.

Die Intersection Observer API bietet eine Möglichkeit, Änderungen an der Schnittmenge eines Zielelements mit einem Vorgängerelement oder dem Ansichtsfenster asynchron zu erkennen. Die konfigurierte Rückruffunktion wird ausgelöst, wenn das Zielelement den Ansichtsbereich oder andere angegebene Elemente schneidet.

// Die zu überwachenden Elemente abrufen const boxes = document.querySelectorAll('.box')

// Erstelle einen Beobachter und konfiguriere die Callback-Funktion // Verwende die Eigenschaft isIntersecting, um zu ermitteln, ob das Element den Ansichtsbereich überschneidet const observer = new IntersectionObserver((entries, observer) => {
 Einträge.fürJeden((Eintrag) => {
    konsole.log(
      Eintrag.Ziel,
      entry.isIntersecting ? "sichtbar" : "unsichtbar"
    );
  });
})

Boxen.fürJedes((Box) => {
  Beobachter.beobachten(Box);
});

siehe

So überprüfen Sie, ob sich ein Element im Ansichtsfenster befindet 4bcl

API für Kreuzungsbeobachter

Zusammenfassen

Damit ist dieser Artikel darüber, wie Sie mit JS prüfen können, ob sich ein Element im Ansichtsfenster befindet, abgeschlossen. Weitere Informationen dazu, wie Sie mit JS prüfen können, ob sich ein Element im Ansichtsfenster befindet, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!