fix: scroll

README.md

@@ -8,7 +8,7 @@
 
 > 暂未上线插件市场
 
-1. 下载[离线文件](https://github.com/flytam/utool-clipboard/releases/tag/1.0.0)，复制后打开 utool 进行安装
+1. 下载[离线文件](https://github.com/flytam/utool-clipboard/releases)，复制后打开 utool 进行安装
    ![](https://files.mdnice.com/user/8265/172f5f7b-d4b4-499a-a524-1fd1c89cef39.png)
 
 2. 通过 utool 进行调起

package.json

@@ -18,6 +18,7 @@
     "axios": "^1.3.4",
     "clipboard-event": "^1.6.0",
     "dayjs": "^1.11.7",
+    "observe-element-in-viewport": "^0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vconsole": "^3.15.0"

src/App.tsx

@@ -1,18 +1,13 @@
 import { useRef, useState } from "react";
-import {
-  Box,
-  Container,
-  createTheme,
-  IconButton,
-  ThemeProvider,
-} from "@mui/material";
+import { Container } from "@mui/material";
 import { FilterTab, filterTabList } from "./components/FilterTab";
 import { useClipboardData } from "./hooks/useClipboardData";
-import { ClipBoardList } from "./components/ClipBoardList";
+import { ClipBoardList, IClipboardRef } from "./components/ClipBoardList";
 import { ClipBoardDataType, copyToClipBoard, paste } from "./utils/clipboard";
 import { useKeyPress } from "ahooks";
 import { useThemeProvider } from "./hooks/useThemeProvider";
 import { Clear } from "./components/Clear";
+import { isInViewport } from "observe-element-in-viewport";
 
 function App() {
   const [clipBoardType, setClipBoard] = useState<{
@@ -31,22 +26,42 @@ function App() {
 
   const [activeIndexList, setActiveIndexList] = useState<number[]>([0]);
 
-  useKeyPress("uparrow", () =>
-    setActiveIndexList((pre) => [Math.max(pre[0] - 1, 0)])
-  );
+  useKeyPress("uparrow", async (e) => {
+    e.preventDefault();
+    setActiveIndexList((pre) => [Math.max(pre[0] - 1, 0)]);
+    const ele = clipboardRef.current?.getActiveItem();
+    if (
+      ele &&
+      !(await isInViewport(ele, {
+        modTop: "-150px",
+      }))
+    ) {
+      clipboardRef.current?.getActiveItem()?.scrollIntoView(true);
+    }
+  });
 
-  useKeyPress("downarrow", () =>
+  useKeyPress("downarrow", async (e) => {
+    e.preventDefault();
     setActiveIndexList((pre) => [
       Math.min(pre[0] + 1, clipBoardList.length - 1),
-    ])
-  );
+    ]);
+    const ele = clipboardRef.current?.getActiveItem();
+    if (
+      ele &&
+      !(await isInViewport(ele, {
+        modBottom: "-100px",
+      }))
+    ) {
+      clipboardRef.current?.getActiveItem()?.scrollIntoView(false);
+    }
+  });
 
   useKeyPress("enter", () => {
     copyToClipBoard(clipBoardList[activeIndexList[0]]);
     clearOne(clipBoardList[activeIndexList[0]].timestamp!);
     paste();
     setTimeout(() => setActiveIndexList([0]), 500);
-    listRef.current?.scrollTo(0, 0);
+    clipboardRef.current?.container?.scrollTo(0, 0);
   });
 
   useKeyPress("leftarrow", () => {
@@ -73,7 +88,7 @@ function App() {
     setActiveIndexList([0]);
   });
 
-  const listRef = useRef<HTMLUListElement | null>(null);
+  const clipboardRef = useRef<IClipboardRef | null>(null);
 
   return (
     <Provider>
@@ -96,7 +111,7 @@ function App() {
           }}
         />
         <ClipBoardList
-          ref={listRef}
+          ref={clipboardRef}
           clipBoardList={clipBoardList}
           activeIndexList={activeIndexList}
           onActiveChange={setActiveIndexList}

src/components/ClipBoardList.tsx

@@ -5,7 +5,7 @@ import {
   ListItemText,
   colors,
 } from "@mui/material";
-import { FC, forwardRef } from "react";
+import { FC, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { ClipBoardData } from "../hooks/useClipboardData";
 import { timeAgo } from "../utils/format";
 import { ClipBoardItemContent } from "./ClipBoardItemContent";
@@ -16,19 +16,36 @@ interface IProps {
   onActiveChange: (list: number[]) => void;
 }
 
-export const ClipBoardList = forwardRef<HTMLUListElement, IProps>(
+export interface IClipboardRef {
+  container: HTMLUListElement | null;
+  getActiveItem: () => HTMLElement | null;
+}
+
+export const ClipBoardList = forwardRef<IClipboardRef, IProps>(
   ({ clipBoardList, activeIndexList, onActiveChange }, ref) => {
+    const containerRef = useRef<HTMLUListElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+      container: containerRef.current,
+      getActiveItem() {
+        return document.getElementById("clip-board-active");
+      },
+    }));
+
     return (
       <List
         sx={{
           overflowX: "auto",
         }}
-        ref={ref}
+        ref={(node) => (containerRef.current = node)}
       >
         {clipBoardList.map((x, index) => (
           <ListItem
             key={index}
             disablePadding
+            id={
+              activeIndexList.includes(index) ? "clip-board-active" : undefined
+            }
             sx={{
               border: `3px solid ${
                 activeIndexList.includes(index)