From c384f3f8c18d41fc3a5aad054d915226bfdb20d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AF=E4=B8=8A=E6=B5=B7?= <15960830467>
Date: Fri, 12 Apr 2024 09:40:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20[Scrollbar]=20=E5=92=8C=20[?=
 =?UTF-8?q?Table]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/en-US/component/scrollbar.md               | 17 +++++++++--------
 docs/en-US/component/table.md                   |  1 +
 packages/components/scrollbar/src/scrollbar.vue | 15 ++++++++++++++-
 packages/components/table/src/table.vue         |  9 ++++++++-
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/docs/en-US/component/scrollbar.md b/docs/en-US/component/scrollbar.md
index 892fe91d03696..b6415309deefd 100644
--- a/docs/en-US/component/scrollbar.md
+++ b/docs/en-US/component/scrollbar.md
@@ -75,11 +75,12 @@ scrollbar/manual-scroll
 
 ### Exposes
 
-| Name          | Description                                | Type                                                                       |
-| ------------- | ------------------------------------------ | -------------------------------------------------------------------------- |
-| handleScroll  | handle scroll event                        | ^[Function]`() => void`                                                    |
-| scrollTo      | scrolls to a particular set of coordinates | ^[Function]`(options: ScrollToOptions \| number, yCoord?: number) => void` |
-| setScrollTop  | Set distance to scroll top                 | ^[Function]`(scrollTop: number) => void`                                   |
-| setScrollLeft | Set distance to scroll left                | ^[Function]`(scrollLeft: number) => void`                                  |
-| update        | update scrollbar state manually            | ^[Function]`() => void`                                                    |
-| wrapRef       | scrollbar wrap ref                         | ^[object]`Ref<HTMLDivElement>`                                             |
+| Name           | Description                                | Type                                                                       |
+| -------------- | ------------------------------------------ | -------------------------------------------------------------------------- |
+| handleScroll   | handle scroll event                        | ^[Function]`() => void`                                                    |
+| scrollTo       | scrolls to a particular set of coordinates | ^[Function]`(options: ScrollToOptions \| number, yCoord?: number) => void` |
+| setScrollTop   | Set distance to scroll top                 | ^[Function]`(scrollTop: number) => void`                                   |
+| setScrollLeft  | Set distance to scroll left                | ^[Function]`(scrollLeft: number) => void`                                  |
+| update         | update scrollbar state manually            | ^[Function]`() => void`                                                    |
+| wrapRef        | scrollbar wrap ref                         | ^[object]`Ref<HTMLDivElement>`                                             |
+| scrollPosition | scroll position                            | ^[object]`Ref<{top: number, left: number}>`                                |
diff --git a/docs/en-US/component/table.md b/docs/en-US/component/table.md
index 1338c4a8e1e3f..cf87b88ff1fbf 100644
--- a/docs/en-US/component/table.md
+++ b/docs/en-US/component/table.md
@@ -296,6 +296,7 @@ table/table-layout
 | current-change     | triggers when current row changes                                                                                                            | ^[Function]`(currentRow: any, oldCurrentRow: any) => void`                                   |
 | header-dragend     | triggers after changing a column's width by dragging the column header's border                                                              | ^[Function]`(newWidth: number, oldWidth: number, column: any, event: MouseEvent) => void`    |
 | expand-change      | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | ^[Function]`(row: any, expandedRows: any[]) => void & (row: any, expanded: boolean) => void` |
+| wrapper-scroll     | triggers when scrolling, return distance of scrolling                                                                                        | ^[Function]`({ scrollLeft: number, scrollTop: number }) => void`                             |
 
 ### Table Slots
 
diff --git a/packages/components/scrollbar/src/scrollbar.vue b/packages/components/scrollbar/src/scrollbar.vue
index 1a9b261d71f05..732c45f6421d6 100644
--- a/packages/components/scrollbar/src/scrollbar.vue
+++ b/packages/components/scrollbar/src/scrollbar.vue
@@ -82,10 +82,21 @@ const resizeKls = computed(() => {
   return [ns.e('view'), props.viewClass]
 })
 
+const scrollPosition = ref<{
+  top: number
+  left: number
+}>({
+  top: 0,
+  left: 0,
+})
+
 const handleScroll = () => {
   if (wrapRef.value) {
     barRef.value?.handleScroll(wrapRef.value)
-
+    scrollPosition.value = {
+      top: wrapRef.value.scrollTop,
+      left: wrapRef.value.scrollLeft,
+    }
     emit('scroll', {
       scrollTop: wrapRef.value.scrollTop,
       scrollLeft: wrapRef.value.scrollLeft,
@@ -181,5 +192,7 @@ defineExpose({
   setScrollLeft,
   /** @description handle scroll event */
   handleScroll,
+  /** @description scroll position */
+  scrollPosition,
 })
 </script>
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index 0b4634b5e97dc..66cd5badf3f2d 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -63,6 +63,7 @@
           :view-style="scrollbarViewStyle"
           :wrap-style="scrollbarStyle"
           :always="scrollbarAlwaysOn"
+          @scroll="handleScroll"
         >
           <table
             ref="tableBody"
@@ -219,8 +220,9 @@ export default defineComponent({
     'current-change',
     'header-dragend',
     'expand-change',
+    'wrapper-scroll',
   ],
-  setup(props) {
+  setup(props, { emit }) {
     type Row = typeof props.data[number]
     const { t } = useLocale()
     const ns = useNamespace('table')
@@ -296,6 +298,10 @@ export default defineComponent({
 
     useKeyRender(table)
 
+    const handleScroll = (event: { scrollLeft: number; scrollTop: number }) => {
+      emit('wrapper-scroll', event)
+    }
+
     return {
       ns,
       layout,
@@ -377,6 +383,7 @@ export default defineComponent({
        * @description set vertical scroll position
        */
       setScrollTop,
+      handleScroll,
     }
   },
 })