SnapEvent.snapTargetInline — Eigenschaft · JavaScript-Referenz

Signatur

SnapEvent.snapTargetInline

Beschreibung

snapTargetInline ist eine schreibgeschützte Eigenschaft des Interfaces SnapEvent. Solche Ereignisse lösen die Scroll-Snap-Events scrollsnapchange und scrollsnapchanging aus. Die Eigenschaft verweist auf das Element, an dem der Scroll-Container in Inline-Richtung einrastet. In horizontaler Schreibrichtung (z. B. Deutsch oder Englisch) ist das die horizontale Achse.

Was der Wert bedeutet, hängt vom Ereignis ab:

Bei scrollsnapchange ist es das neue Einrast-Ziel, nachdem der Scrollvorgang beendet ist.
Bei scrollsnapchanging ist es das Element, an dem der Browser voraussichtlich einrasten wird. Der Wert steht schon während der Geste fest, etwa beim Wischen oder Ziehen.

Die Eigenschaft ist null, wenn der Container in Inline-Richtung gar nicht einrastet. Das ist zum Beispiel bei scroll-snap-type: y mandatory der Fall. Ist das Einrast-Ziel ein Pseudo-Element, erhältst du das Element, zu dem es gehört. Typische Anwendungen sind horizontale Karussells, Galerien oder Tab-Leisten: Das aktive Element wird hervorgehoben, Punkt-Anzeigen werden aktualisiert oder Inhalte werden nachgeladen, ohne dass du Scrollpositionen selbst berechnen musst.

Für die Block-Richtung (meist vertikal) gibt es die Gegenstück-Eigenschaft snapTargetBlock.

Rückgabewert

Typ

Element | null

Beschreibung

Das Element, an dem der Container in Inline-Richtung einrastet, oder null, wenn es in dieser Richtung kein Einrast-Ziel gibt. Bei Pseudo-Elementen erhältst du das zugehörige Element.

Beispiele

Aktive Karussell-Folie nach dem Einrasten markieren

// CSS: .carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
//      .carousel > .slide { flex: 0 0 100%; scroll-snap-align: center; }
const carousel = document.querySelector('.carousel');

carousel.addEventListener('scrollsnapchange', (event) => {
  const target = event.snapTargetInline;
  if (!target) return;

  carousel.querySelectorAll('.slide').forEach((slide) => {
    slide.classList.toggle('is-active', slide === target);
  });
  console.log('Aktive Folie:', target.dataset.index);
});

Aktive Folie: 2

Vorschau schon während der Wischgeste (scrollsnapchanging)

const gallery = document.querySelector('.gallery');
const dots = [...document.querySelectorAll('.dots button')];
const slides = [...gallery.children];

// Das Ereignis feuert, sobald sich das voraussichtliche Ziel ändert
gallery.onscrollsnapchanging = (event) => {
  const index = slides.indexOf(event.snapTargetInline);
  dots.forEach((dot, i) => dot.toggleAttribute('aria-current', i === index));
};

Beide Achsen in einem Raster auswerten, mit Feature-Erkennung

const grid = document.querySelector('.snap-grid'); // scroll-snap-type: both mandatory

if ('onscrollsnapchange' in window) {
  grid.addEventListener('scrollsnapchange', ({ snapTargetInline, snapTargetBlock }) => {
    console.log('Inline-Ziel:', snapTargetInline?.id ?? 'keins');
    console.log('Block-Ziel:', snapTargetBlock?.id ?? 'keins');
  });
} else {
  // Ersatzlösung: z. B. IntersectionObserver verwenden
  console.warn('Scroll-Snap-Events werden nicht unterstützt.');
}

Inline-Ziel: zelle-3-2 Block-Ziel: zelle-3-2

// Wichtig · Fallstricke

Kompatibilität: Experimentell und nur in Chromium-Browsern verfügbar (Chrome/Edge 129+). Firefox und Safari unterstützen die Eigenschaft derzeit nicht. Prüfe die Unterstützung mit 'onscrollsnapchange' in window und sieh eine Ersatzlösung vor, z. B. mit IntersectionObserver.
Inline ist nicht immer horizontal: Bei vertikaler Schreibrichtung (writing-mode: vertical-rl) zeigt die Inline-Achse nach unten. Welche physische Achse gemeint ist, hängt also von der Schreibrichtung ab.
Mit null rechnen: Rastet der Container nur vertikal ein oder gibt es kein passendes Ziel, ist der Wert null. Nutze deshalb Optional Chaining (?.).
Nicht bei jedem Scrollen: scrollsnapchange feuert nur, wenn sich das Einrast-Ziel tatsächlich ändert, und erst nach dem Ende des Scrollvorgangs. Ein Scroll, der wieder am selben Element einrastet, löst kein Ereignis aus.
Bei scrollsnapchanging ist der Wert nur eine Vorhersage. Das tatsächliche Ziel kann am Ende ein anderes sein.
Die Ereignisse werden am Scroll-Container ausgelöst. Beim Scrollen des Dokuments selbst registrierst du sie am document bzw. an window.

Siehe auch

SnapEvent.snapTargetBlock Element.ariaMultiLine Event.target DragEvent.dataTransfer Element.ariaLive