workaround scroll component

components/main/collections/index.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { createBreakpoint } from "react-use";
 import { AnimatePresence } from "framer-motion";
-import InfiniteScroll from "react-infinite-scroll-component";
+import InfiniteScroll from "react-infinite-scroller";
 
 import { Image } from "@/utils/type";
 import { useCollections } from "@/components/main/hooks/useCollections";
@@ -23,16 +23,15 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
   return (
     <>
       <InfiniteScroll
-        dataLength={pagination?.total}
-        next={() => {
+        pageStart={0}
+        getScrollParent={() => document.getElementById("content")}
+        loadMore={() => {
           if (infiniteLoading) return;
           infiniteRefetch();
         }}
+        useWindow={false}
         hasMore={pagination?.total_pages > pagination?.page}
-        loader={<div />}
-        scrollableTarget="content"
         className="mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14"
-        style={{ overflow: "initial" }}
       >
         {images?.map((collection: Image, i: number) =>
           collection?.loading ? (

package-lock.json

@@ -19,7 +19,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^4.11.0",
-        "react-infinite-scroll-component": "^6.1.0",
+        "react-infinite-scroller": "^1.2.6",
         "react-use": "^17.4.0"
       },
       "devDependencies": {
@@ -3317,7 +3317,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3744,7 +3743,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3811,30 +3809,21 @@
         "react": "*"
       }
     },
-    "node_modules/react-infinite-scroll-component": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
-      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
+    "node_modules/react-infinite-scroller": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz",
+      "integrity": "sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==",
       "dependencies": {
-        "throttle-debounce": "^2.1.0"
+        "prop-types": "^15.5.8"
       },
       "peerDependencies": {
-        "react": ">=16.0.0"
-      }
-    },
-    "node_modules/react-infinite-scroll-component/node_modules/throttle-debounce": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
-      "engines": {
-        "node": ">=8"
+        "react": "^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-universal-interface": {
       "version": "0.6.2",

package.json

@@ -20,7 +20,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^4.11.0",
-    "react-infinite-scroll-component": "^6.1.0",
+    "react-infinite-scroller": "^1.2.6",
     "react-use": "^17.4.0"
   },
   "devDependencies": {