fix: scroll to just below title bar consistently

elk-zone · Apr 7, 2024 · 08f847f · 08f847f
1 parent 9ca6c9b
commit 08f847f
Showing 1 changed file with 7 additions and 2 deletions.
diff --git 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
+      }
     }
   }