pref: optimize virtual scroll (#111)

src/hooks/resize.ts

@@ -1,13 +1,6 @@
 import { throttle } from 'lodash'
 import { type Ref, onUnmounted, ref, toRef, watch } from 'vue'
 
-export const defineResizeCallback = (
-  callback: ResizeObserverCallback,
-  wait?: number,
-) => {
-  return throttle(callback, wait ?? 100)
-}
-
 export const useContainerResize = (
   el: HTMLElement | null | Ref<HTMLElement | null>,
 ) => {
@@ -20,11 +13,11 @@ export const useContainerResize = (
     toRef(el),
     (el) => {
       if (el) {
-        const onResize = defineResizeCallback((entries) => {
+        const onResize = throttle((entries: ResizeObserverEntry[]) => {
           const entry = entries[0]
           width.value = entry.contentRect.width
           height.value = entry.contentRect.height
-        })
+        }, 64)
 
         observer.value = new ResizeObserver(onResize)
         observer.value.observe(el)

src/hooks/scroll.ts

@@ -22,29 +22,29 @@ export const useContainerScroll = (
       scrollLeft.value = container.value.scrollLeft
       scrollTop.value = container.value.scrollTop
     }
-  }, options?.throttle || 100)
+  }, options?.throttle ?? 64)
 
   watch(
     container,
     (el) => {
       if (el) {
-        el.addEventListener('scroll', onScroll)
+        el.addEventListener('scroll', onScroll, { passive: true })
       }
     },
     { immediate: true },
   )
 
   const x = computed({
-    get: () => scrollLeft,
+    get: () => scrollLeft.value,
     set: (val) => {
-      container.value?.scrollTo({ left: val.value })
+      container.value?.scrollTo({ left: val })
     },
   })
 
   const y = computed({
-    get: () => scrollTop,
+    get: () => scrollTop.value,
     set: (val) => {
-      container.value?.scrollTo({ top: val.value })
+      container.value?.scrollTo({ top: val })
     },
   })