From 2ce3a7ffcfd8d8b0b8061bc14e56738f6dccd070 Mon Sep 17 00:00:00 2001
From: GuoJikun <guojikun486546@163.com>
Date: Mon, 22 Jan 2024 15:36:21 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=BC=98=E5=8C=96scrollbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/components/scrollbar.md     |  2 ++
 packages/ivy-design-wc/package.json           |  2 +-
 .../src/components/scrollbar/index.vue        | 20 +++++++++++--------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/docs/src/components/scrollbar.md b/packages/docs/src/components/scrollbar.md
index 234f9b4..d1f978f 100644
--- a/packages/docs/src/components/scrollbar.md
+++ b/packages/docs/src/components/scrollbar.md
@@ -9,6 +9,7 @@
 <ivy-button @click="handleClick">测试</ivy-button>
 
 <ivy-scrollbar height="500px" ref="a1">
+    <div style="height: 40px;background-color:gray;"></div>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
@@ -49,6 +50,7 @@
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
+    <div style="height: 40px;background-color:gray;"></div>
 </ivy-scrollbar>
 
 <script setup>
diff --git a/packages/ivy-design-wc/package.json b/packages/ivy-design-wc/package.json
index 4c87c18..2d4854b 100644
--- a/packages/ivy-design-wc/package.json
+++ b/packages/ivy-design-wc/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ivy-design/ce",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "private": false,
     "type": "module",
     "main": "dist/ivy-design.js",
diff --git a/packages/ivy-design-wc/src/components/scrollbar/index.vue b/packages/ivy-design-wc/src/components/scrollbar/index.vue
index c0d4a5c..3339b74 100644
--- a/packages/ivy-design-wc/src/components/scrollbar/index.vue
+++ b/packages/ivy-design-wc/src/components/scrollbar/index.vue
@@ -134,18 +134,18 @@ onMounted(() => {
     })
     init()
     useMutationObserver(
-        scrollbarView.value,
+        scrollWrap.value,
         (mutationList) => {
-            for (const mutation of mutationList) {
-                if (mutation.type === 'attributes') {
-                    console.log(123)
-                    init()
-                }
-            }
+            console.log(123)
+            init()
         },
-        { attributes: true, childList: true, subtree: true, attributeFilter: ['style'] }
+        { attributes: true, childList: true, subtree: true, attributeFilter: ['style', 'class'] }
     )
 })
+
+const handleScroll = useThrottleFn(() => {
+    console.log(scrollWrap.value?.scrollTop)
+}, 10)
 </script>
 
 <template>
@@ -154,6 +154,7 @@ onMounted(() => {
             class="scrollbar__wrap"
             :style="{ height: props.height, maxHeight: props.maxHeight }"
             ref="scrollWrap"
+            @scroll="handleScroll"
         >
             <div class="scrollbar__view" ref="scrollbarView">
                 <slot></slot>
@@ -206,6 +207,9 @@ onMounted(() => {
 .scrollbar__wrap {
     overflow: auto;
     scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }
 .scrollbar__view {
     width: max-content;