IntersectionObserver.trackVisibility — Eigenschaft · JavaScript-Referenz

Signatur

IntersectionObserver.trackVisibility

Beschreibung

Die Eigenschaft trackVisibility gehört zur Intersection Observer v2-Erweiterung. Sie gibt den Wert der Option trackVisibility zurück, die dem Konstruktor new IntersectionObserver(callback, options) übergeben wurde. Ist sie true, prüft der Browser bei jeder Meldung nicht nur, ob sich das Ziel mit dem Wurzelelement überschneidet, sondern auch, ob es für Nutzende wirklich sichtbar ist.

„Sichtbar“ heißt dabei: Das Element wird nicht von anderen Inhalten überdeckt und ist nicht durch opacity, filter, Transformationen (außer 2D-Verschiebung bzw. proportionaler Skalierung) oder Ähnliches verfälscht. Das Ergebnis steht in IntersectionObserverEntry.isVisible. Ohne trackVisibility ist isVisible immer false.

Typische Einsatzzwecke sind Betrugs- und Clickjacking-Schutz (z. B. bei eingebetteten „Gefällt mir“-Buttons oder Zahlungs-Widgets in iframes) sowie die verlässliche Messung von Werbe-Impressionen. Weil die Sichtbarkeitsprüfung rechenintensiv ist, muss zusätzlich die Option delay auf mindestens 100 Millisekunden gesetzt werden.

Beispiele

Beobachter mit Sichtbarkeitsprüfung anlegen und Eigenschaft auslesen

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.target.id, 'schneidet:', entry.isIntersecting, 'sichtbar:', entry.isVisible);
  }
}, {
  threshold: 1.0,
  trackVisibility: true,
  delay: 100 // Pflicht bei trackVisibility (mind. 100 ms)
});

console.log(observer.trackVisibility);
console.log(observer.delay);
observer.observe(document.querySelector('#bestellen-button'));

true 100 bestellen-button schneidet: true sichtbar: true

Clickjacking-Schutz: Klick nur akzeptieren, wenn der Button wirklich sichtbar ist

const button = document.querySelector('#like-button');
let visibleSince = 0;

const observer = new IntersectionObserver(([entry]) => {
  // Zeitpunkt merken, ab dem der Button unverdeckt sichtbar ist
  visibleSince = entry.isVisible ? entry.time : 0;
}, { threshold: 1.0, trackVisibility: true, delay: 100 });

observer.observe(button);

button.addEventListener('click', (event) => {
  const sichtbarLangGenug = visibleSince && performance.now() - visibleSince >= 800;
  if (!sichtbarLangGenug) {
    event.preventDefault();
    console.warn('Klick verworfen: Button war verdeckt oder zu kurz sichtbar.');
    return;
  }
  console.log('Like gezählt');
});

Like gezählt

Feature-Erkennung mit Fallback

const supportsV2 = 'trackVisibility' in IntersectionObserver.prototype;

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    const gesehen = supportsV2 ? entry.isVisible : entry.isIntersecting;
    if (gesehen) console.log('Impression für', entry.target.dataset.adId);
  }
}, supportsV2
  ? { threshold: 0.5, trackVisibility: true, delay: 100 }
  : { threshold: 0.5 });

console.log('Sichtbarkeitsprüfung aktiv:', observer.trackVisibility === true);
document.querySelectorAll('.ad').forEach((el) => observer.observe(el));

Sichtbarkeitsprüfung aktiv: true // in Chromium Sichtbarkeitsprüfung aktiv: false // in Firefox/Safari

// Wichtig · Fallstricke

Nur lesbar: Nachträglich zuweisen hat keine Wirkung. Der Wert wird ausschließlich über die Konstruktor-Option festgelegt.
delay ist Pflicht: Bei trackVisibility: true und einem delay unter 100 wirft der Konstruktor einen Fehler (NotSupportedError).
Browser-Unterstützung: Bisher nur in Chromium-Browsern (Chrome/Edge/Opera ab 74). Firefox und Safari kennen die Eigenschaft nicht (undefined) und ignorieren die Option. Für eine sichere Nutzung immer eine Feature-Erkennung einbauen.
Performance: Die Sichtbarkeitsprüfung ist deutlich teurer als eine reine Überschneidungsprüfung. Setze sie nur für wenige, wichtige Elemente ein, nicht etwa für Lazy-Loading ganzer Listen.
Konservative Auswertung: Der Browser meldet im Zweifel isVisible: false, z. B. bei opacity unter 1, CSS-Filtern, Rotationen oder überlagernden Elementen, auch wenn diese transparent wirken. Falsch-negative Ergebnisse sind also möglich.
Sicherheit: Die Eigenschaft ist ein Baustein gegen Clickjacking, aber kein vollständiger Schutz. Kombiniere sie serverseitig mit X-Frame-Options bzw. CSP frame-ancestors.

Siehe auch

IntersectionObserver.rootMargin IntersectionObserver.thresholds IntersectionObserver.delay IntersectionObserver.root IntersectionObserver.scrollMargin