From 6288cf29fcec15679e6efe93c6eb0ca455b3c1e6 Mon Sep 17 00:00:00 2001 From: sunfree <17315650350@163.com> Date: Tue, 4 Jun 2024 23:58:34 +0800 Subject: [PATCH] add news --- src/components/blogs/HomePage.vue | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue index 2041601..bc25c9b 100644 --- a/src/components/blogs/HomePage.vue +++ b/src/components/blogs/HomePage.vue @@ -17,7 +17,7 @@ </div> <a-button type="link" shape="circle" class="down_button" size="large" @click="downScroll"> <template #icon> - <DownCircleOutlined style="font-size: 35px;color: aliceblue;" /> + <DownCircleOutlined style="font-size: 35px;color: aliceblue;" spin/> </template> </a-button> <div> @@ -92,17 +92,21 @@ const handleScroll = () => { show_menu.value = scrollOffset > halfViewportHeight; } }; -const downScroll = () => { - const scrollbar = document.querySelector('.simplebar-content-wrapper'); - if (scrollbar) { - setTimeout(() => { - const scrollOffset = scrollbar.scrollTop; - const halfViewportHeight = scrollbar.clientHeight / 6; - scrollOffset==halfViewportHeight - console.log(scrollOffset) - }, 1500) - } -} +const downScroll = () => { + const scrollbar = document.querySelector('.simplebar-content-wrapper'); + if (scrollbar) { + const scrollTop = scrollbar.scrollTop; + + const viewportHeight = scrollbar.clientHeight; + const scrollDistance = viewportHeight - scrollTop-60; + + setTimeout(() => { + scrollbar.scrollBy({ top: scrollDistance, behavior: 'smooth' }); + }, 300); + } +}; + + const items = ref<MenuProps['items']>([ { key: 'home',