feat(useScroll): add useScroll

src/index.ts

@@ -1,2 +1,3 @@
 export * from './useTitle'
 export * from './useEvent'
+export * from './useScroll'

src/useEvent.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-redeclare */
-import { Ref, onMounted, onUnmounted, isRef, getCurrentInstance } from 'vue'
+import { Ref, onMounted, onUnmounted, isRef, getCurrentInstance, shallowRef } from 'vue'
 
-type Target = Ref<EventTarget> | EventTarget | string
+export type Target = Ref<EventTarget> | EventTarget | string
 
 interface WindowEventHandler<T extends keyof WindowEventMap> {
   (this: Window, e: WindowEventMap[T]): any
@@ -15,17 +15,17 @@ type HandlerOptions = boolean | AddEventListenerOptions
 type DocumentEvents = keyof DocumentEventMap
 type WindowEvents = keyof WindowEventMap
 
-function getTarget(target: Target): EventTarget | null {
+function getTarget(target: Target): EventTarget {
   if (!target) {
     return window
   }
   if (typeof target === 'string') {
     const dom = document.querySelector(target)
     if (!dom && process.env.NODE_ENV !== 'production') {
       console.error('target is not found')
-      return null
+      throw Error(`target of selector ${target} is not found`)
     }
-    return dom
+    return dom!
   }
   if (isRef(target)) {
     return target.value
@@ -50,19 +50,19 @@ export function useEvent<T extends WindowEvents>(
   event: T,
   handler: WindowEventHandler<T>,
   options?: HandlerOptions
-): void
+): Ref<EventTarget>
 export function useEvent<T extends DocumentEvents>(
   event: T,
   handler: DocumentEventHandler<T>,
   options?: HandlerOptions,
   target?: Target
-): void
+): Ref<EventTarget>
 export function useEvent<T extends DocumentEvents>(
   event: T,
   handler: DocumentEventHandler<T>,
   options?: HandlerOptions,
   target?: string
-): void
+): Ref<EventTarget>
 export function useEvent(
   event: string,
   cb: EventListenerOrEventListenerObject,
@@ -72,9 +72,9 @@ export function useEvent(
   if (!event || !cb) {
     return
   }
-  let eventTarget: EventTarget | null
+  const eventTarget: Ref<EventTarget | null> = shallowRef(null)
   function register() {
-    eventTarget = registerEvent(target, event, cb, options)
+    eventTarget.value = registerEvent(target, event, cb, options)
   }
   const currentInstance = getCurrentInstance()
   if (currentInstance) {
@@ -86,9 +86,10 @@ export function useEvent(
       })
     }
     onUnmounted(() => {
-      if (eventTarget) {
-        eventTarget.removeEventListener(event, cb)
+      if (eventTarget.value) {
+        eventTarget.value.removeEventListener(event, cb)
       }
     })
   }
+  return eventTarget
 }

src/useScroll.ts

@@ -0,0 +1,29 @@
+import { reactive, toRefs, ToRefs } from 'vue'
+import { useEvent, Target } from './useEvent'
+
+export type ScrollState = ToRefs<{
+  x: number
+  y: number
+}>
+
+export function useScroll(target: Target): ScrollState {
+  if (target === window && process.env.NODE_ENV !== 'production') {
+    throw Error('target of useScroll should not be window')
+  }
+  const state = reactive({
+    x: 0,
+    y: 0
+  })
+  const eventTarget = useEvent(
+    'scroll',
+    () => {
+      if (eventTarget.value) {
+        state.x = ((eventTarget.value as unknown) as Element).scrollLeft
+        state.y = ((eventTarget.value as unknown) as Element).scrollTop
+      }
+    },
+    { capture: false, passive: true },
+    target
+  )
+  return toRefs(state)
+}