Merge pull request #3818 from nextcloud/fix/scroll-detection/next

fix scroll detection composable
nextcloud · Dec 25, 2024 · 290e4bd · 290e4bd
2 parents 4bc9687 + 034d5a1
commit 290e4bd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git 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<HTMLElement>(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
@@ -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 @@
 </script>
 
 <template>
-	<NcAppContent :class="[{ closed: pollStore.isClosed, scrolled: !!scrolled, 'vote-style-beta-510': preferencesStore.user.useAlternativeStyling }, pollStore.type]">
+	<NcAppContent :class="[{ closed: pollStore.isClosed, scrolled: scrolled, 'vote-style-beta-510': preferencesStore.user.useAlternativeStyling }, pollStore.type, voteMainId]">
 		<HeaderBar class="area__header">
 			<template #title>
-				{{ pollStore.configuration.title }} scrolled: {{ scrolled }}
+				{{ pollStore.configuration.title }}
 			</template>
 
 			<template #right>
@@ -83,7 +81,7 @@
 			<PollInfoLine />
 		</HeaderBar>
 
-		<div :id="voteMainId" class="vote_main">
+		<div class="vote_main">
 			<VoteInfoCards />
 
 			<div v-if="pollStore.configuration.description" class="area__description">