feat(useWindowScroll): use useScroll under the hood (#4424)

OrbisK · antfu · web-flow · commit a033efc33439 · 2024-12-24T04:43:14.000Z
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/core/useScroll/index.test.ts b/packages/core/useScroll/index.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { reactive } from 'vue'
+import { useScroll } from '.'
+
+describe('useScroll', () => {
+  it('should be defined', () => {
+    expect(useScroll).toBeDefined()
+  })
+
+  it('should have default x and y', async () => {
+    const { x, y } = useScroll(window)
+    expect(x.value).toBe(0)
+    expect(y.value).toBe(0)
+  })
+
+  it('should have right default values', () => {
+    const values = reactive(useScroll(window))
+    expect(values).toMatchInlineSnapshot(`
+      {
+        "arrivedState": {
+          "bottom": true,
+          "left": true,
+          "right": true,
+          "top": true,
+        },
+        "directions": {
+          "bottom": false,
+          "left": false,
+          "right": false,
+          "top": false,
+        },
+        "isScrolling": false,
+        "measure": [Function],
+        "x": 0,
+        "y": 0,
+      }
+    `)
+  })
+})
diff --git a/packages/core/useScroll/index.ts b/packages/core/useScroll/index.ts
@@ -83,7 +83,6 @@ const ARRIVED_STATE_THRESHOLD_PIXELS = 1
  * @param element
  * @param options
  */
-
 export function useScroll(
   element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>,
   options: UseScrollOptions = {},
diff --git a/packages/core/useWindowScroll/index.test.ts b/packages/core/useWindowScroll/index.test.ts
@@ -0,0 +1,40 @@
+import { useScroll } from '@vueuse/core'
+import { describe, expect, it } from 'vitest'
+import { reactive } from 'vue'
+import { useWindowScroll } from '.'
+
+describe('useWindowScroll', () => {
+  it('should be defined', () => {
+    expect(useWindowScroll).toBeDefined()
+  })
+
+  it('should have default x and y', () => {
+    const { x, y } = useWindowScroll()
+    expect(x.value).toBe(0)
+    expect(y.value).toBe(0)
+  })
+
+  it('should have right default values', () => {
+    const values = reactive(useScroll(window))
+    expect(values).toMatchInlineSnapshot(`
+      {
+        "arrivedState": {
+          "bottom": true,
+          "left": true,
+          "right": true,
+          "top": true,
+        },
+        "directions": {
+          "bottom": false,
+          "left": false,
+          "right": false,
+          "top": false,
+        },
+        "isScrolling": false,
+        "measure": [Function],
+        "x": 0,
+        "y": 0,
+      }
+    `)
+  })
+})
diff --git a/packages/core/useWindowScroll/index.ts b/packages/core/useWindowScroll/index.ts
@@ -1,10 +1,9 @@
 import type { ConfigurableWindow } from '../_configurable'
-import { computed, ref } from 'vue'
+import type { UseScrollOptions } from '../useScroll'
 import { defaultWindow } from '../_configurable'
-import { useEventListener } from '../useEventListener'
+import { useScroll } from '../useScroll'
 
-export interface UseWindowScrollOptions extends ConfigurableWindow {
-  behavior?: ScrollBehavior
+export interface UseWindowScrollOptions extends ConfigurableWindow, UseScrollOptions {
 }
 
 /**
@@ -13,50 +12,9 @@ export interface UseWindowScrollOptions extends ConfigurableWindow {
  * @see https://vueuse.org/useWindowScroll
  * @param options
  */
-
 export function useWindowScroll(options: UseWindowScrollOptions = {}) {
-  const { window = defaultWindow, behavior = 'auto' } = options
-  if (!window) {
-    return {
-      x: ref(0),
-      y: ref(0),
-    }
-  }
-
-  const internalX = ref(window.scrollX)
-  const internalY = ref(window.scrollY)
-
-  const x = computed({
-    get() {
-      return internalX.value
-    },
-    set(x: number) {
-      scrollTo({ left: x, behavior })
-    },
-  })
-  const y = computed({
-    get() {
-      return internalY.value
-    },
-    set(y: number) {
-      scrollTo({ top: y, behavior })
-    },
-  })
-
-  useEventListener(
-    window,
-    'scroll',
-    () => {
-      internalX.value = window.scrollX
-      internalY.value = window.scrollY
-    },
-    {
-      capture: false,
-      passive: true,
-    },
-  )
-
-  return { x, y }
+  const { window = defaultWindow, ...rest } = options
+  return useScroll(window, rest)
 }
 
 export type UseWindowScrollReturn = ReturnType<typeof useWindowScroll>
