From e05ae827f3e48c7cdfebf6a16336a212be3d7266 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Thu, 1 May 2025 17:07:10 +0800
Subject: [PATCH] =?UTF-8?q?`FaScrollArea`=20=E7=BB=84=E4=BB=B6=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20onScroll=20=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaScrollArea/index.vue               | 10 +++++++++-
 .../components/FaScrollArea/scroll-area/ScrollArea.vue |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/FaScrollArea/index.vue b/src/ui/components/FaScrollArea/index.vue
index 81341e22..a62c8eac 100755
--- a/src/ui/components/FaScrollArea/index.vue
+++ b/src/ui/components/FaScrollArea/index.vue
@@ -25,6 +25,10 @@ const props = withDefaults(
   },
 )
 
+const emits = defineEmits<{
+  onScroll: [Event]
+}>()
+
 const scrollAreaRef = useTemplateRef('scrollAreaRef')
 
 const arrivedState = ref<{
@@ -46,6 +50,10 @@ const showMaskEnd = computed(() => {
   return !arrivedState.value?.bottom
 })
 
+function onScroll(event: Event) {
+  emits('onScroll', event)
+}
+
 function onWheel(event: WheelEvent) {
   if (props.horizontal) {
     scrollAreaRef.value?.el?.viewportElement?.scrollBy({
@@ -108,7 +116,7 @@ defineExpose({
       '--mask-scroll-container-gradient-color': props.gradientColor,
     } : {}"
   >
-    <ScrollArea ref="scrollAreaRef" :class="cn('relative z-0 flex-1', props.contentClass)" :scrollbar="props.scrollbar" :on-wheel="onWheel">
+    <ScrollArea ref="scrollAreaRef" :class="cn('relative z-0 flex-1', props.contentClass)" :scrollbar="props.scrollbar" :on-scroll="onScroll" :on-wheel="onWheel">
       <slot />
       <ScrollBar v-if="props.horizontal" orientation="horizontal" :class="{ 'opacity-0 pointer-events-none': !props.scrollbar }" />
     </ScrollArea>
diff --git a/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue b/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
index 478a6861..85cc3e17 100644
--- a/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
+++ b/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
@@ -13,6 +13,7 @@ import ScrollBar from './ScrollBar.vue'
 const props = defineProps<ScrollAreaRootProps & {
   class?: HTMLAttributes['class']
   scrollbar?: boolean
+  onScroll?: (event: Event) => void
   onWheel?: (event: WheelEvent) => void
 }>()
 
@@ -31,7 +32,7 @@ defineExpose({
 
 <template>
   <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport ref="viewportRef" class="scroll-area-viewport h-full w-full rounded-[inherit]" @wheel.prevent="onWheel">
+    <ScrollAreaViewport ref="viewportRef" class="scroll-area-viewport h-full w-full rounded-[inherit]" @scroll="onScroll" @wheel="onWheel">
       <slot />
     </ScrollAreaViewport>
     <ScrollBar :class="{ 'opacity-0 pointer-events-none': !props.scrollbar }" />