From a974f1317c41df258b16baa5cacc995d7d399009 Mon Sep 17 00:00:00 2001
From: kadiryazici <kyzc411@gmail.com>
Date: Sun, 17 Mar 2024 18:42:10 +0300
Subject: [PATCH] Fix wrong scroll element Settings

---
 src/components/AppScroller.vue      |  5 ++++-
 src/composables/useScrollElement.ts |  8 ++++++++
 src/pages/SettingsPage.vue          | 15 ++++++++-------
 3 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 src/composables/useScrollElement.ts

diff --git a/src/components/AppScroller.vue b/src/components/AppScroller.vue
index 6b7ae0d..aa1116f 100644
--- a/src/components/AppScroller.vue
+++ b/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, () => {
diff --git a/src/composables/useScrollElement.ts b/src/composables/useScrollElement.ts
new file mode 100644
index 0000000..15c8fb3
--- /dev/null
+++ b/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)!
+}
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 25de402..0c61989 100644
--- a/src/pages/SettingsPage.vue
+++ b/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 }"