diff --git a/src/composables/handleScroll.ts b/src/composables/handleScroll.ts index 2c5bfeba3..76dad4e19 100644 --- a/src/composables/handleScroll.ts +++ b/src/composables/handleScroll.ts @@ -11,9 +11,10 @@ import { onMounted, onUnmounted, ref } from 'vue' * @param offset the offset in px that should be scrolled before returning the scroll value */ export function useHandleScroll(scrollElementId: string, offset:number = 20) { + const scrolled = ref(0) const scrollElement = ref(null) - + function handleScroll() { if (scrollElement.value.scrollTop > offset) { scrolled.value = scrollElement.value.scrollTop @@ -24,6 +25,11 @@ export function useHandleScroll(scrollElementId: string, offset:number = 20) { onMounted(() => { scrollElement.value = document.getElementById(scrollElementId) + // Fallback for class based elements + if (scrollElement.value === null) { + const scrollElements = document.getElementsByClassName(scrollElementId) + scrollElement.value = scrollElements[0] as HTMLElement + } if (scrollElement.value !== null) { scrollElement.value.addEventListener('scroll', handleScroll) @@ -33,5 +39,5 @@ export function useHandleScroll(scrollElementId: string, offset:number = 20) { onUnmounted(() => { scrollElement.value.removeEventListener('scroll', handleScroll) }) - return { scrolled } + return scrolled } diff --git a/src/views/Vote.vue b/src/views/Vote.vue index 4f5d43bcd..2ccced919 100644 --- a/src/views/Vote.vue +++ b/src/views/Vote.vue @@ -34,9 +34,7 @@ const pollStore = usePollStore() const optionsStore = useOptionsStore() const preferencesStore = usePreferencesStore() - - // FIXME: Fix this, since it is not 'vote-main' that is scrolled - const voteMainId = 'vote-main' + const voteMainId = 'watched-scroll-area' const scrolled = useHandleScroll(voteMainId) const isLoading = ref(false) @@ -70,10 +68,10 @@