fixed: disable scrol when scroll up

onflow · Feb 18, 2025 · 9615a50 · 9615a50
1 parent 5d4fccf
commit 9615a50
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/ui/views/NFT/GridTab.tsx b/src/ui/views/NFT/GridTab.tsx
@@ -152,7 +152,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => {
 
   const [nfts, setNFTs] = useState<any[]>([]);
 
-  const [total, setTotal] = useState(0);
+  const [total, setTotal] = useState(1);
 
   const [hasMore, setHasMore] = useState(true);
 
@@ -429,7 +429,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => {
           <InfiniteScroll
             dataLength={nfts.length}
             next={nextPage}
-            hasMore={hasMore}
+            hasMore={hasMore && scrollDirection === 'down'}
             loader={<LLSpinner />}
             height="calc(100vh - 160px)"
             style={{
@@ -438,6 +438,13 @@ const GridTab = forwardRef((props: GridTabProps, ref) => {
               marginTop: '-16px',
             }}
             scrollThreshold="100px"
+            onScroll={(e: any) => {
+              const target = e.target as HTMLElement;
+              const scrollTop = target.scrollTop;
+              const direction = scrollTop > lastScrollTop.current ? 'down' : 'up';
+              setScrollDirection(direction);
+              lastScrollTop.current = scrollTop;
+            }}
           >
             <Grid container className={classes.grid}>
               {nfts && nfts.map(createGridCard)}

diff --git a/src/ui/views/NftEvm/GridTab.tsx b/src/ui/views/NftEvm/GridTab.tsx
@@ -154,7 +154,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => {
 
   const [nfts, setNFTs] = useState<any[]>([]);
 
-  const [total, setTotal] = useState(0);
+  const [total, setTotal] = useState(1);
 
   const [hasMore, setHasMore] = useState(true);
 
@@ -380,7 +380,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => {
           <InfiniteScroll
             dataLength={nfts.length}
             next={nextPage}
-            hasMore={hasMore}
+            hasMore={hasMore && scrollDirection === 'down'}
             loader={<LLSpinner />}
             height="calc(100vh - 160px)"
             style={{
@@ -389,6 +389,13 @@ const GridTab = forwardRef((props: GridTabProps, ref) => {
               marginTop: '-16px',
             }}
             scrollThreshold="100px"
+            onScroll={(e: any) => {
+              const target = e.target as HTMLElement;
+              const scrollTop = target.scrollTop;
+              const direction = scrollTop > lastScrollTop.current ? 'down' : 'up';
+              setScrollDirection(direction);
+              lastScrollTop.current = scrollTop;
+            }}
           >
             <Grid container className={classes.grid}>
               {nfts && nfts.map(createGridCard)}