From 012808a1dad5f382a220105a8c65c824594ea6ab Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 21 Nov 2024 17:02:22 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E7=9A=84=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/workflow/task/taskWaiting.vue   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/apps/web-antd/src/views/workflow/task/taskWaiting.vue b/apps/web-antd/src/views/workflow/task/taskWaiting.vue
index a1061ef0..102f9feb 100644
--- a/apps/web-antd/src/views/workflow/task/taskWaiting.vue
+++ b/apps/web-antd/src/views/workflow/task/taskWaiting.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useTemplateRef } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
 import {
@@ -11,15 +13,35 @@ import {
   Tabs,
   Tag,
 } from 'ant-design-vue';
+import { debounce } from 'lodash-es';
 
 import { ApprovalCard } from '../components';
+
+const scrollContainer = useTemplateRef('scrollContainer');
+
+const handleScroll = debounce((e: Event) => {
+  if (!e.target) {
+    return;
+  }
+  // e.target.scrollTop 是元素顶部到当前可视区域顶部的距离，即已滚动的高度。
+  // e.target.clientHeight 是元素的可视高度。
+  // e.target.scrollHeight 是元素的总高度。
+  const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
+  // 判断是否滚动到底部
+  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  console.log(isBottom);
+  // console.log(scrollTop + clientHeight);
+  // console.log(scrollHeight);
+}, 200);
 </script>
 
 <template>
   <Page :auto-content-height="true">
     <div class="flex h-full gap-2">
       <div
+        ref="scrollContainer"
         class="bg-background h-full w-[320px] overflow-y-auto rounded-lg py-3"
+        @scroll="handleScroll"
       >
         <div class="flex flex-col gap-2">
           <ApprovalCard