From 937374e2d8dc3b319e8e8a4b194df0d72afae957 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 27 May 2024 02:09:27 +0800 Subject: [PATCH] refactor: use a new method to reimplement the scroll-top-top function --- .../TopBar/components/FavoritesPop.vue | 4 ++-- .../TopBar/components/HistoryPop.vue | 4 ++-- .../TopBar/components/MomentsPop.vue | 4 ++-- src/contentScripts/views/App.vue | 4 ++-- src/utils/main.ts | 22 +++++-------------- 5 files changed, 13 insertions(+), 25 deletions(-) diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue index 4b66c8a7..5a6fcf2b 100644 --- a/src/components/TopBar/components/FavoritesPop.vue +++ b/src/components/TopBar/components/FavoritesPop.vue @@ -6,7 +6,7 @@ import Empty from '~/components/Empty.vue' import Loading from '~/components/Loading.vue' import { useApiClient } from '~/composables/api' import { calcCurrentTime } from '~/utils/dataFormatter' -import { getUserID, isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main' +import { getUserID, isHomePage, removeHttpFromUrl, scrollToTop } from '~/utils/main' import type { FavoriteCategory, FavoriteResource } from '../types' @@ -40,7 +40,7 @@ watch(activatedMediaId, (newVal: number, oldVal: number) => { favoriteResources.length = 0 if (favoriteVideosWrap.value) - smoothScrollToTop(favoriteVideosWrap.value, 300) + scrollToTop(favoriteVideosWrap.value) currentPageNum.value = 1 getFavoriteResources() diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue index 90977afe..11e28718 100644 --- a/src/components/TopBar/components/HistoryPop.vue +++ b/src/components/TopBar/components/HistoryPop.vue @@ -11,7 +11,7 @@ import { useApiClient } from '~/composables/api' import type { HistoryResult, List as HistoryItem } from '~/models/history/history' import { Business } from '~/models/history/history' import { calcCurrentTime } from '~/utils/dataFormatter' -import { isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main' +import { isHomePage, removeHttpFromUrl, scrollToTop } from '~/utils/main' const { t } = useI18n() const api = useApiClient() @@ -49,7 +49,7 @@ watch(activatedTab, (newVal: number | undefined, oldVal: number | undefined) => historys.length = 0 if (historysWrap.value) - smoothScrollToTop(historysWrap.value, 300) + scrollToTop(historysWrap.value) if (newVal === 0) { getHistoryList(Business.ARCHIVE) diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue index cb76fcf8..f1f5fcfe 100644 --- a/src/components/TopBar/components/MomentsPop.vue +++ b/src/components/TopBar/components/MomentsPop.vue @@ -8,7 +8,7 @@ import Tooltip from '~/components/Tooltip.vue' import { useApiClient } from '~/composables/api' import type { TopBarLiveMomentResult } from '~/models/moment/topBarLiveMoment' import type { TopBarMomentResult } from '~/models/moment/topBarMoment' -import { getCSRF, isHomePage, smoothScrollToTop } from '~/utils/main' +import { getCSRF, isHomePage, scrollToTop } from '~/utils/main' type MomentType = 'video' | 'live' | 'article' interface MomentTab { type: MomentType, name: any } @@ -56,7 +56,7 @@ watch(() => selectedMomentTab.value.type, (newVal, oldVal) => { return if (momentsWrap.value) - smoothScrollToTop(momentsWrap.value, 300) + scrollToTop(momentsWrap.value) initData() }, { immediate: true }) diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 6af0a42b..a9858aa5 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -15,7 +15,7 @@ import type { BewlyAppProvider } from '~/composables/useAppProvider' import { useDark } from '~/composables/useDark' import { AppPage, LanguageType } from '~/enums/appEnums' import { accessKey, settings } from '~/logic' -import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main' +import { getUserID, hexToRGBA, isHomePage, scrollToTop } from '~/utils/main' const { isDark } = useDark() const activatedPage = ref(settings.value.dockItemVisibilityList.find(e => e.visible === true)?.page ?? AppPage.Home) @@ -194,7 +194,7 @@ function setAppThemeColor() { function handleBackToTop(targetScrollTop = 0 as number) { const osInstance = scrollbarRef.value?.osInstance() - smoothScrollToTop(osInstance.elements().viewport, 300, targetScrollTop) + scrollToTop(osInstance.elements().viewport, targetScrollTop) topBarRef.value?.toggleTopBarVisible(true) } diff --git a/src/utils/main.ts b/src/utils/main.ts index 584e9823..f9e14854 100644 --- a/src/utils/main.ts +++ b/src/utils/main.ts @@ -68,27 +68,15 @@ export function hexToRGBA(hex: string, alpha: number): string { /** * Smooth scroll to the top of the html element */ -export function smoothScrollToTop(element: HTMLElement, duration: number, targetScrollTop = 0 as number) { +export function scrollToTop(element: HTMLElement, targetScrollTop = 0 as number) { // cancel if already on top if (element.scrollTop === targetScrollTop) return - const cosParameter = (element.scrollTop - targetScrollTop) / 2 - let scrollCount = 0 - let oldTimestamp = 0 - - function step(newTimestamp: number) { - if (oldTimestamp !== 0) { - // if duration is 0 scrollCount will be Infinity - scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration - if (scrollCount >= Math.PI) - return (element.scrollTop = targetScrollTop) - element.scrollTop = targetScrollTop + cosParameter + cosParameter * Math.cos(scrollCount) - } - oldTimestamp = newTimestamp - window.requestAnimationFrame(step) - } - window.requestAnimationFrame(step) + element.scrollTo({ + top: targetScrollTop, + behavior: 'smooth', + }) } export function injectCSS(css: string): HTMLStyleElement {