Merge pull request #18 from ivy-design/dev

wip: 优化scrollbar
ivy-design · Jan 22, 2024 · 9a11382 · 9a11382
2 parents bcd9fdc + 2ce3a7f
commit 9a11382
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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;