FaScrollArea 组件新增 onScroll 事件

Author: hooray

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>

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 }" />