Signatur
Beschreibung
Die schreibgeschützte Eigenschaft endOffset einer ViewTimeline gibt die Scrollposition an, bei der die Timeline ihr Ende erreicht, also 100 % Fortschritt. Der Wert ist ein CSSNumericValue (meist ein CSSUnitValue in px) und wird vom Anfang des scrollbaren Überlaufbereichs des Scroll-Containers aus gemessen, entlang der Achse, die in axis festgelegt ist.
Standardmäßig entspricht das Ende der Scrollposition, bei der das beobachtete Element (subject) den sichtbaren Bereich (Scrollport) gerade vollständig verlassen hat. Das gilt für den Bereich cover. Wurde beim Erzeugen ein inset angegeben, verschiebt sich dieser Punkt entsprechend.
Zusammen mit startOffset lässt sich damit genau bestimmen, in welchem Scrollbereich eine scrollgesteuerte Animation abläuft. Das ist nützlich für eigene Berechnungen, zur Fehlersuche oder wenn JavaScript-Logik mit einer CSS-Scroll-Animation abgestimmt werden soll.
Rückgabewert
CSSUnitValue mit der Einheit px.Beispiele
Endposition einer View-Timeline auslesen
const subject = document.querySelector('.karte');
const timeline = new ViewTimeline({
subject,
axis: 'block'
});
// Das Layout muss berechnet sein, damit der Wert stimmt
requestAnimationFrame(() => {
const end = timeline.endOffset;
console.log(end.toString());
console.log(`${end.value} ${end.unit}`);
});Aktiven Scrollbereich einer Animation bestimmen
const bild = document.querySelector('#hero-bild');
const timeline = new ViewTimeline({ subject: bild });
bild.animate(
{ opacity: [0, 1], transform: ['scale(0.8)', 'scale(1)'] },
{ timeline, fill: 'both' }
);
const logRange = () => {
const start = timeline.startOffset.to('px').value;
const end = timeline.endOffset.to('px').value;
console.log(`Animation läuft von ${start}px bis ${end}px (Länge: ${end - start}px)`);
};
window.addEventListener('resize', logRange);
requestAnimationFrame(logRange);Einfluss von inset auf endOffset
const el = document.querySelector('.abschnitt');
const normal = new ViewTimeline({ subject: el });
const mitInset = new ViewTimeline({
subject: el,
inset: [CSS.px(0), CSS.px(200)] // Ende 200px früher erreicht
});
requestAnimationFrame(() => {
console.log('ohne inset:', normal.endOffset.toString());
console.log('mit inset:', mitInset.endOffset.toString());
});Feature-Erkennung mit Fallback
if ('ViewTimeline' in window) {
const tl = new ViewTimeline({ subject: document.querySelector('main section') });
requestAnimationFrame(() => console.log('Ende bei', tl.endOffset.toString()));
} else {
console.log('ViewTimeline wird nicht unterstützt – IntersectionObserver als Ersatz verwenden');
}// Wichtig · Fallstricke
- Browser-Unterstützung: Wird in Chromium-Browsern (Chrome/Edge 115+) und neueren Safari-Versionen unterstützt. In Firefox ist die Funktion nur hinter einem Flag verfügbar. Vor der Nutzung sollte man mit
'ViewTimeline' in windowprüfen, ob die API vorhanden ist. - Schreibgeschützt: Eine Zuweisung an
endOffsethat keine Wirkung. Um den Bereich zu ändern, gibt man beim Konstruktorinsetan oder nutztrangeStart/rangeEndder Animation. - Abhängig vom Layout: Der Wert ändert sich bei Größenänderungen, nachgeladenen Inhalten oder Schriftwechseln. Er sollte daher nicht einmalig zwischengespeichert, sondern bei Bedarf (z. B. nach
resize) neu gelesen werden. - Inaktive Timeline: Hat das Element keinen scrollbaren Vorfahren oder ist es nicht gerendert (z. B.
display: none), ist die Timeline inaktiv und der Wert nicht aussagekräftig. - Der Rückgabewert ist ein Objekt und keine Zahl. Die reine Zahl erhält man mit
.value, bei Bedarf nach einer Umrechnung mit.to('px').