From 5f6f8ed5edb2a84591da2cbee0aee3c3652f86cc Mon Sep 17 00:00:00 2001
From: jasinco <jasinc90@gmail.com>
Date: Wed, 11 Jun 2025 01:41:41 +0800
Subject: [PATCH] Use OnScroll instead of handler

---
 src/Fetch.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/Fetch.tsx b/src/Fetch.tsx
index 99387b5..38e68f7 100644
--- a/src/Fetch.tsx
+++ b/src/Fetch.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react"
+import React from "react"
 import { FetchPost, MediaPathTrc, SinglePost_t } from "./api"
 import { z } from 'zod/v4'
 import { useInfiniteQuery } from "@tanstack/react-query"
@@ -7,7 +7,7 @@ import { useInfiniteQuery } from "@tanstack/react-query"
 
 const Single = ({ post }: { post: z.infer<typeof SinglePost_t> }) => {
 	return (
-		<div className="w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4">
+		<div className="w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 snap-start">
 			<p className="text-gray-800 text-base leading-relaxed">{post.content}</p>
 			{post.enclosure.length > 0 && post.enclosure[0] != null && <div className="flex flex-row overflow-x-auto gap-3 py-2 -mx-2 px-2 border-t border-gray-200 pt-4">
 				{post.enclosure.map((enc, index) => {
@@ -50,17 +50,15 @@ export const Fetch = () => {
 			return lastPage !== null && lastPage.length > 0 && (lastPage[lastPage.length - 1].id - 1) > 0 ? lastPage[lastPage.length - 1].id - 1 : undefined
 		},
 	})
-	const observer = new IntersectionObserver((ent) => {
-
-		if (ent[0].isIntersecting && ent[0].intersectionRatio > 90) {
-			hasNextPage && !isFetching && fetchNextPage()
-		}
-	})
-	useEffect(() => {
-		observer.observe(document.getElementById("skeleton")!)
-	}, [])
 	return (
-		<div className="h-dvh w-dvw flex flex-col items-center gap-6 py-8 px-4 overflow-scroll">
+		<div className="h-dvh w-dvw flex flex-col items-center gap-6 py-8 px-4 overflow-scroll snap-y" onScroll={(ev) => {
+			if (ev.currentTarget.scrollTop / (ev.currentTarget.scrollHeight - ev.currentTarget.clientHeight) >= 0.95) {
+				if (hasNextPage && !isFetching) {
+					fetchNextPage()
+				}
+
+			}
+		}}>
 			{status === 'pending' && <p>Loading</p>}
 			{status === 'error' && <p>Error: {error.message}</p>}
 			{data && data.pages.map((group, i) => (
@@ -70,7 +68,7 @@ export const Fetch = () => {
 					))}
 				</React.Fragment>
 			))}
-			<div className={"w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 animate-pulse h-[20dvh]" + (hasNextPage ? "" : " hidden")} id="skeleton">
+			<div className={"w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 animate-pulse mb-10" + (hasNextPage ? "" : " hidden")} id="skeleton">
 			</div>
 			{!hasNextPage && <p className="mb-15">見底了</p>}
 		</div>