Account for client width and height when calculating scroll distance (#…

…229)
flackr · Feb 5, 2024 · fe4339f · fe4339f
1 parent efac132
commit fe4339f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/scroll-timeline-base.js b/src/scroll-timeline-base.js
@@ -785,9 +785,9 @@ export function fractionalOffset(timeline, value) {
 
     let sourceScrollDistance = undefined;
     if (normalizeAxis(axis, sourceMeasurements) === 'x') {
-      sourceScrollDistance = source.scrollWidth;
+      sourceScrollDistance = sourceMeasurements.scrollWidth - sourceMeasurements.clientWidth;
     } else {
-      sourceScrollDistance = source.scrollHeight;
+      sourceScrollDistance = sourceMeasurements.scrollHeight - sourceMeasurements.clientHeight;
     }
 
     // TODO: pass relative measurements (viewport, font-size, root font-size, etc. ) to resolvePx() to resolve relative units

diff --git a/test/expected.txt b/test/expected.txt
@@ -920,8 +920,8 @@ PASS	/scroll-animations/scroll-timelines/scroll-timeline-invalidation.html	Anima
 PASS	/scroll-animations/scroll-timelines/scroll-timeline-invalidation.html	Animation current time and effect local time are updated after scroller size changes.
 FAIL	/scroll-animations/scroll-timelines/scroll-timeline-invalidation.html	If scroll animation resizes its scroll timeline scroller, layout reruns once per frame.
 PASS	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with percentage range [JavaScript API]
-FAIL	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with px range [JavaScript API]
-FAIL	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with calculated range [JavaScript API]
+PASS	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with px range [JavaScript API]
+PASS	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with calculated range [JavaScript API]
 FAIL	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with EM range [JavaScript API]
 FAIL	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with percentage range [CSS]
 FAIL	/scroll-animations/scroll-timelines/scroll-timeline-range.html	Scroll timeline with px range [CSS]