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;