fix: scroll both body and documentElement for cross-browser compatibility

src/hooks/useOverlay.hook.ts

@@ -1,7 +1,7 @@
-import { useEventListener, useWindowSize } from '@vueuse/core'
+import { useEventListener, useWindowSize } from "@vueuse/core"
-import { computed, ref } from 'vue'
+import { computed, ref } from "vue"
 
-import { MOBILE_BREAKPOINT } from '@/constants/mobile'
+import { MOBILE_BREAKPOINT } from "@/constants/mobile"
 
 export const useOverlay = (listen = true) => {
   const x = ref(0)
@@ -10,31 +10,32 @@ export const useOverlay = (listen = true) => {
   const isMobile = computed(() => width.value <= MOBILE_BREAKPOINT)
 
   if (listen) {
-    useEventListener(
+    // In Firefox/Chrome, body is the horizontal scroll container (body has
-      window,
+    // computed overflow-x: auto from overflow-y: hidden). In Safari, the
-      'scroll',
+    // viewport (documentElement) is used instead. Listen on both.
-      () => {
+    const updateScroll = () => {
-        x.value = window.scrollX
+      x.value = document.body.scrollLeft || window.scrollX
-        y.value = window.scrollY
+      y.value = document.body.scrollTop || window.scrollY
-      },
+    }
-      {
+    useEventListener(window, "scroll", updateScroll, {
-        passive: true,
+      passive: true,
-        capture: false
+      capture: false,
-      }
+    })
-    )
+    useEventListener(document.body, "scroll", updateScroll, {
+      passive: true,
+      capture: false,
+    })
   }
 
   const scrollToNote = (to: number) => {
     const go = () => {
-      const scrollOptions = isMobile.value
+      if (isMobile.value) {
-        ? {
+        document.body.scrollTop = to
-            top: to
+        document.documentElement.scrollTop = to
-          }
+      } else {
-        : {
+        document.body.scrollLeft = to
-            left: to
+        document.documentElement.scrollLeft = to
-          }
+      }
-
-      window.scrollTo(scrollOptions)
     }
 
     setTimeout(() => {
@@ -46,6 +47,6 @@ export const useOverlay = (listen = true) => {
     x,
     y,
     isMobile,
-    scrollToNote
+    scrollToNote,
   }
 }