FIX: FetchOnScroll functionality on AllCategoriesPage - BUG: duplicate categories appear

frontend/src/hooks/fetchContentOnScroll.ts

@@ -2,20 +2,29 @@ import { useEffect } from "react";
 
 export function fetchContentOnScroll(callback: () => void, hasMoreData: boolean) {
   useEffect(() => {
+    const root = document.querySelector("#root") as HTMLElement;
+    
     const handleScroll = () => {
       if (!hasMoreData) return; // Don't trigger scroll if no more data
-      const scrollPosition = window.innerHeight + document.documentElement.scrollTop;
-      const scrollHeight = document.documentElement.scrollHeight;
+      
+      // Use properties of the element itself, not document
+      const scrollPosition = root.scrollTop + root.clientHeight;
+      const scrollHeight = root.scrollHeight;
 
       if (scrollPosition >= scrollHeight * 0.9) {
         callback(); // Trigger data fetching when 90% scroll is reached
+        setTimeout(() => {
+          // Delay to prevent multiple fetches
+          root.scrollTop = root.scrollTop - 1;
+        }, 100);
       }
     };
 
-    window.addEventListener("scroll", handleScroll);
+    // Add scroll event listener to the root element
+    root.addEventListener("scroll", handleScroll);
 
     return () => {
-      window.removeEventListener("scroll", handleScroll); // Cleanup on unmount
+      root.removeEventListener("scroll", handleScroll); // Cleanup on unmount
     };
   }, [callback, hasMoreData]);
 }