fix: scroll into view when article selected

zhanglun · Jan 1, 2024 · 0e94c5e · 0e94c5e
1 parent 48be4d2
commit 0e94c5e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 76 deletions.
diff --git a/src/components/ArticleList/index.tsx b/src/components/ArticleList/index.tsx
@@ -26,7 +26,7 @@ export interface ArticleListRefType {
   innerRef: React.RefObject<HTMLDivElement>;
 }
 
-export const ArticleList = React.memo((props: ArticleListProps) => {
+export const ArticleList = React.memo(React.forwardRef<HTMLDivElement, any>((props: ArticleListProps, ref) => {
   const { articles, isEmpty, isLoading, isReachingEnd, size, setSize } = props;
   const loadRef = useRef<HTMLDivElement | null>(null);
   const entry = useIntersectionObserver(loadRef, {});
@@ -54,7 +54,7 @@ export const ArticleList = React.memo((props: ArticleListProps) => {
   }, [loadRefVisible, isReachingEnd]);
 
   return (
-    <div className="overflow-y-auto h-[calc(100vh_-_var(--app-toolbar-height))]">
+    <div className="overflow-y-auto h-[calc(100vh_-_var(--app-toolbar-height))]" ref={ref}>
       {isEmpty ? (
         <div className="absolute top-1/2 -translate-y-1/2 w-full flex flex-col justify-center items-center gap-1 text-muted-foreground">
           <Snail size={34} strokeWidth={1} />
@@ -80,4 +80,4 @@ export const ArticleList = React.memo((props: ArticleListProps) => {
       </div>
     </div>
   );
-});
+}));
diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
diff --git a/src/layout/Article/Layout1.tsx b/src/layout/Article/Layout1.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import { ArticleList } from "@/components/ArticleList";
 import { useBearStore } from "@/stores";
@@ -29,6 +29,7 @@ export const Layout1 = React.memo(
     const params: { name: string } = useParams();
     const [isSyncing, setIsSyncing] = useState(false);
     const [currentUuid, setCurrentUuid] = useState<string>();
+    const listRef = useRef<HTMLDivElement>(null);
 
     const store = useBearStore((state) => ({
       viewMeta: state.viewMeta,
@@ -98,6 +99,43 @@ export const Layout1 = React.memo(
       }
     };
 
+    function calculateItemPosition(
+      direction: "up" | "down",
+      article: ArticleResItem | null
+    ) {
+      if (!article?.uuid) {
+        return;
+      }
+
+      const $li = document.getElementById(article.uuid);
+      const bounding = $li?.getBoundingClientRect();
+      const winH = window.innerHeight;
+
+      if (
+        (direction === "up" || direction === "down") &&
+        bounding &&
+        bounding.top < 58
+      ) {
+        const offset = 58 - bounding.top;
+        const scrollTop = (listRef?.current?.scrollTop || 0) - offset;
+
+        listRef?.current?.scrollTo(0, scrollTop);
+      } else if (
+        (direction === "up" || direction === "down") &&
+        bounding &&
+        bounding.bottom > winH
+      ) {
+        const offset = bounding.bottom - winH;
+        const scrollTop = (listRef?.current?.scrollTop || 0) + offset;
+
+        console.log(
+          "🚀 ~ file: index.tsx:324 ~ ArticleContainer ~ scrollTop:",
+          scrollTop
+        );
+        listRef?.current?.scrollTo(0, scrollTop);
+      }
+    }
+
     function goPreviousArticle() {
       let previousItem: ArticleResItem;
       let uuid = store.article?.uuid;
@@ -110,6 +148,7 @@ export const Layout1 = React.memo(
           store.updateArticleStatus(previousItem, ArticleReadStatus.READ);
           setCurrentUuid((_) => previousItem.uuid);
           store.setArticle(previousItem);
+          calculateItemPosition("up", previousItem);
 
           break;
         }
@@ -138,6 +177,7 @@ export const Layout1 = React.memo(
       nextItem.read_status = ArticleReadStatus.READ;
       store.updateArticleStatus(nextItem, ArticleReadStatus.READ);
       store.setArticle(nextItem);
+      calculateItemPosition("down", nextItem);
 
       return [false];
     };
@@ -229,6 +269,7 @@ export const Layout1 = React.memo(
         </div>
         <div className="relative h-full">
           <ArticleList
+            ref={listRef}
             articles={articles}
             title={params.name}
             type={type}