forked from Mirrors/elk
chore: avoid scroll to top when switching tabs
This commit is contained in:
parent
cd03f3fa1e
commit
be30faaa0f
3 changed files with 14 additions and 4 deletions
|
@ -15,6 +15,7 @@ const { options, command, replace, preventScrollTop = false } = $defineProps<{
|
|||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const nuxtApp = useNuxtApp()
|
||||
|
||||
useCommands(() => command
|
||||
? options.map(tab => ({
|
||||
|
@ -24,7 +25,15 @@ useCommands(() => command
|
|||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||
onActivate: () => router.replace(tab.to),
|
||||
}))
|
||||
: [])
|
||||
: [],
|
||||
)
|
||||
|
||||
const handleClick = (to: RouteLocationRaw) => {
|
||||
if (preventScrollTop || nuxtApp.$preventScrollToTop(router.resolve(to).fullPath))
|
||||
return
|
||||
|
||||
nuxtApp.$scrollToTop()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -41,7 +50,7 @@ useCommands(() => command
|
|||
tabindex="1"
|
||||
hover:bg-active transition-100
|
||||
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
|
||||
@click="!preventScrollTop && $scrollToTop()"
|
||||
@click="handleClick(option.to)"
|
||||
>
|
||||
<span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
|
||||
</NuxtLink>
|
||||
|
|
|
@ -14,7 +14,7 @@ function click() {
|
|||
<template>
|
||||
<article flex flex-col relative>
|
||||
<template v-if="notification.type === 'follow'">
|
||||
<NuxtLink :to="getAccountRoute(notification.account)" @click.capture="click">
|
||||
<NuxtLink :to="getAccountRoute(notification.account)" @click="click">
|
||||
<div
|
||||
flex items-center absolute
|
||||
ps-3 pe-4 inset-is-0
|
||||
|
|
|
@ -6,6 +6,7 @@ interface RestoreScroll {
|
|||
id: string
|
||||
type: 'status' | 'follow'
|
||||
}
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const lastStatus = useSessionStorage<Record<string, RestoreScroll>>(STORAGE_KEY_LAST_SCROLL_POSITION, {})
|
||||
return {
|
||||
|
@ -20,7 +21,7 @@ export default defineNuxtPlugin(() => {
|
|||
? document.getElementById(`status-${restore.id}`)
|
||||
: document.querySelector(`a[href="${restore.id}"]`)
|
||||
if (el)
|
||||
nextTick().then(() => el?.scrollIntoView())
|
||||
el.scrollIntoView()
|
||||
else
|
||||
delete lastStatus.value[useRoute().fullPath]
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue