From 08f847f15f1ec8489f80e63e4c8d2f40c2d7b7c0 Mon Sep 17 00:00:00 2001 From: TAKAHASHI Shuuji Date: Sun, 7 Apr 2024 23:57:10 +0900 Subject: [PATCH] fix: scroll to just below title bar consistently --- plugins/magic-keys.client.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/plugins/magic-keys.client.ts b/plugins/magic-keys.client.ts index 7b65b48608..738d9ae4e3 100644 --- a/plugins/magic-keys.client.ts +++ b/plugins/magic-keys.client.ts @@ -6,6 +6,7 @@ export default defineNuxtPlugin(({ $scrollToTop }) => { const keys = useMagicKeys() const router = useRouter() const i18n = useNuxtApp().$i18n + const { y } = useWindowScroll({ behavior: 'smooth' }) // disable shortcuts when focused on inputs (https://vueuse.org/core/usemagickeys/#conditionally-disable) const activeElement = useActiveElement() @@ -96,8 +97,12 @@ export default defineNuxtPlugin(({ $scrollToTop }) => { const activeStatusId = activeElement.value ? getActiveStatueId(activeElement.value) : undefined const nextOrPreviousStatusId = getNextOrPreviousStatusId(activeStatusId, direction) if (nextOrPreviousStatusId) { - document.getElementById(nextOrPreviousStatusId)?.scrollIntoView({ behavior: 'smooth', block: 'center' }) - document.getElementById(nextOrPreviousStatusId)?.focus() + const status = document.getElementById(nextOrPreviousStatusId) + if (status) { + status.focus({ preventScroll: true }) + const topBarHeight = 58 + y.value += status.getBoundingClientRect().top - topBarHeight + } } }