Merge pull request #413 from studiometa/feature/scroll-x-y

[Feature] Migrate legacy `pageXOffset` and `pageYOffset` to their equivalent `scrollX` and `scrollY`

.prettierignore

@@ -1,3 +1,4 @@
 dist/
 packages/docs/guide/recipes/counter-component/Counter.html
 packages/docs/guide/recipes/scroll-linked-animation/ScrollLinkedAnimation.html
+packages/docs/.vitepress/cache

CHANGELOG.md

@@ -19,6 +19,7 @@ All notable changes to this project will be documented in this file. The format
 - Migrate tests from Jest to Bun ([#411](https://github.com/studiometa/js-toolkit/pull/411))
 - Refactor the requestAnimationFrame polyfill ([#411](https://github.com/studiometa/js-toolkit/pull/411), [dfd62b6](https://github.com/studiometa/js-toolkit/commit/dfd62b6), [34bb2c5](https://github.com/studiometa/js-toolkit/commit/34bb2c5))
 - Improve raf service usage ([#411](https://github.com/studiometa/js-toolkit/pull/411), [352f509](https://github.com/studiometa/js-toolkit/commit/352f509))
+- Migrate legacy `pageXOffset` and `pageYOffset` to their equivalent `scrollX` and `scrollY` ([#413](https://github.com/studiometa/js-toolkit/pull/413))
 
 ### Removed
 

packages/docs/api/methods-hooks-services.md

@@ -148,4 +148,3 @@ export default class Component extends Base {
 :::tip Tip
 See the [`useRaf` service](/api/services/useRaf.html) for more details.
 :::
-

packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts

@@ -81,7 +81,7 @@ function updateProps(
   axis: 'x' | 'y' = 'x',
 ): void {
   props.current[axis] = clamp(
-    axis === 'x' ? window.pageXOffset : window.pageYOffset,
+    axis === 'x' ? window.scrollX : window.scrollY,
     props.start[axis],
     props.end[axis],
   );
@@ -181,8 +181,8 @@ export function withScrolledInView<S extends Base = Base>(
           ? getOffsetSizes(this.$el)
           : this.$el.getBoundingClientRect();
 
-        targetSizes.y += window.pageYOffset;
-        targetSizes.x += window.pageXOffset;
+        targetSizes.y += window.scrollY;
+        targetSizes.x += window.scrollX;
 
         const containerSizes = {
           x: 0,
@@ -195,11 +195,11 @@ export function withScrolledInView<S extends Base = Base>(
 
         // Y axis
         const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);
-        const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
+        const yCurrent = clamp(window.scrollY, yStart, yEnd);
         const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));
         // X axis
         const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);
-        const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
+        const xCurrent = clamp(window.scrollX, xStart, xEnd);
         const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));
 
         this.__props.start.x = xStart;

packages/js-toolkit/services/scroll.ts

@@ -28,13 +28,13 @@ function createScrollService(): ScrollService {
     const xLast = props.x;
 
     // Check scroll Y
-    if (window.pageYOffset !== props.y) {
-      props.y = window.pageYOffset;
+    if (window.scrollY !== props.y) {
+      props.y = window.scrollY;
     }
 
     // Check scroll x
-    if (window.pageXOffset !== props.x) {
-      props.x = window.pageXOffset;
+    if (window.scrollX !== props.x) {
+      props.x = window.scrollX;
     }
 
     props.changed.x = props.x !== xLast;
@@ -69,15 +69,15 @@ function createScrollService(): ScrollService {
 
   const { add, remove, has, props, trigger } = useService({
     props: {
-      x: window.pageXOffset,
-      y: window.pageYOffset,
+      x: window.scrollX,
+      y: window.scrollY,
       changed: {
         x: false,
         y: false,
       },
       last: {
-        x: window.pageXOffset,
-        y: window.pageYOffset,
+        x: window.scrollX,
+        y: window.scrollY,
       },
       delta: {
         x: 0,

packages/js-toolkit/utils/css/getOffsetSizes.ts

@@ -3,8 +3,8 @@
  */
 export default function getOffsetSizes(element: HTMLElement) {
   let parent = element;
-  let x = -window.pageXOffset;
-  let y = -window.pageYOffset;
+  let x = -window.scrollX;
+  let y = -window.scrollY;
 
   while (parent) {
     x += parent.offsetLeft;

packages/js-toolkit/utils/scrollTo.ts

@@ -18,13 +18,13 @@ export default function scrollTo(
   }
 
   if (!targetElement) {
-    return Promise.resolve(window.pageYOffset);
+    return Promise.resolve(window.scrollY);
   }
 
   const sizes = targetElement.getBoundingClientRect();
   const scrollMargin = getComputedStyle(targetElement).scrollMarginTop || '0';
   const max = document.documentElement.scrollHeight - window.innerHeight;
-  let scrollTarget = sizes.top + window.pageYOffset - Number.parseInt(scrollMargin, 10) - offset;
+  let scrollTarget = sizes.top + window.scrollY - Number.parseInt(scrollMargin, 10) - offset;
 
   // Make sure to not scroll more than the max scroll allowed
   if (scrollTarget > max) {
@@ -33,8 +33,8 @@ export default function scrollTo(
 
   return new Promise((resolve) => {
     let isScrolling = false;
-    let scroll = window.pageYOffset;
-    let dampScroll = window.pageYOffset;
+    let scroll = window.scrollY;
+    let dampScroll = window.scrollY;
 
     /**
      * Handler for the wheel event
@@ -50,7 +50,7 @@ export default function scrollTo(
     function end() {
       window.removeEventListener('wheel', eventHandler);
       window.removeEventListener('touchmove', eventHandler);
-      resolve(window.pageYOffset);
+      resolve(window.scrollY);
     }
 
     /**
@@ -81,7 +81,7 @@ export default function scrollTo(
     function start(target) {
       // Update vars
       isScrolling = true;
-      dampScroll = window.pageYOffset;
+      dampScroll = window.scrollY;
       scroll = target;
 
       // Bind wheel event to stop the animation if

packages/tests/__utils__/happydom.ts

@@ -7,7 +7,7 @@ window.__DEV__ = true;
 let y = 0;
 
 Object.defineProperties(window, {
-  pageYOffset: {
+  scrollY: {
     get: () => {
       return y;
     },

packages/tests/utils/scrollTo.spec.ts

@@ -1,21 +1,25 @@
 import { describe, it, expect, mock, spyOn, afterEach, beforeEach } from 'bun:test';
-import { scrollTo, wait } from '@studiometa/js-toolkit/utils';
+import { scrollTo } from '@studiometa/js-toolkit/utils';
 import { mockScroll, restoreScroll } from '../__utils__/scroll.js';
-import { useFakeTimers, useRealTimers, runAllTimers, advanceTimersByTimeAsync } from '../__utils__/faketimers.js';
+import {
+  useFakeTimers,
+  useRealTimers,
+  runAllTimers,
+  advanceTimersByTimeAsync,
+} from '../__utils__/faketimers.js';
 
 describe('The `scrollTo` function', () => {
   let fn;
   let element;
   let elementSpy;
-  let scrollHeightSpy;
 
   beforeEach(() => {
     fn = mock(({ top }) => {
-      window.pageYOffset = top;
+      window.scrollY = top;
     });
     window.scrollTo = fn;
 
-    scrollHeightSpy = mockScroll({ height: 10000 }).scrollHeightSpy;
+    mockScroll({ height: 10000 });
 
     element = document.createElement('div');
     elementSpy = spyOn(element, 'getBoundingClientRect');
@@ -28,7 +32,7 @@ describe('The `scrollTo` function', () => {
   });
 
   afterEach(() => {
-    window.pageYOffset = 0;
+    window.scrollY = 0;
     elementSpy.mockRestore();
     document.body.innerHTML = '';
     restoreScroll();