Fix wrong scroll element Settings

src/components/AppScroller.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, provide, ref, watch } from 'vue'
 import { type OverlayScrollbarsComponentRef, OverlayScrollbarsComponent as ScrollView } from 'overlayscrollbars-vue'
 import type { PartialOptions as OverlayScrollbarsOptions } from 'overlayscrollbars'
 import { computedEager } from '@vueuse/core'
@@ -10,6 +10,7 @@ import { batchFn } from '../utils/batch'
 import { ColorPreference } from '../constants'
 import { useTheme } from '../composables/useTheme'
 import { useRoute } from '../composables/useRoute'
+import { scrollElementInjectionKey } from '../composables/useScrollElement'
 
 const route = useRoute()
 const scrollView = ref<Option<OverlayScrollbarsComponentRef>>(null)
@@ -18,6 +19,8 @@ const focus = batchFn(() => {
   scrollView.value?.getElement()?.focus()
 })
 
+provide(scrollElementInjectionKey, computed(() => scrollView.value?.osInstance()?.elements()?.viewport as HTMLElement))
+
 useTauriEvent('window:hidden', focus)
 onMounted(focus)
 watch(route.currentPage, () => {

src/composables/useScrollElement.ts

@@ -0,0 +1,8 @@
+import { inject } from 'vue'
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export const scrollElementInjectionKey: InjectionKey<ComputedRef<HTMLElement>> = Symbol('scrollElement')
+
+export function useScrollElement() {
+  return inject(scrollElementInjectionKey)!
+}

src/pages/SettingsPage.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import { disable as disableAutostart, enable as enableAutostart } from 'tauri-plugin-autostart-api'
-import { computedEager, watchDebounced } from '@vueuse/core'
+import { computedEager, useEventListener, watchDebounced } from '@vueuse/core'
 
 import { invoke } from '@tauri-apps/api/tauri'
 import { requestPermission } from '@tauri-apps/api/notification'
@@ -22,6 +22,7 @@ import Switch from '../components/Switch.vue'
 import SettingItem from '../components/SettingItem.vue'
 import { useI18n } from '../composables/useI18n'
 import { Page, useRoute } from '../composables/useRoute'
+import { useScrollElement } from '../composables/useScrollElement'
 
 const route = useRoute()
 const { t, currentLanguage } = useI18n()
@@ -165,16 +166,16 @@ const selectLanguageItems = computed(() => [
 ])
 
 const scrollTop = ref(0)
-function handleScroll(e: Event) {
+const scrollElement = useScrollElement()
+
+useEventListener(scrollElement, 'scroll', (e) => {
+  console.log(e)
   scrollTop.value = (e.target as HTMLElement).scrollTop
-}
+})
 </script>
 
 <template>
-  <div
-    class="settings"
-    @scroll="handleScroll"
-  >
+  <div class="settings">
     <div
       class="settings-header"
       :class="{ 'settings-header-with-border': scrollTop > 0 }"