fix(home): 元素不应该超出窗口底部

XYShaoKang · Feb 25, 2023 · efb04ea · efb04ea
1 parent 757bbd5
commit efb04ea
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/content/pages/home/BlockUserList.tsx b/src/content/pages/home/BlockUserList.tsx
@@ -99,6 +99,11 @@ const BlockUserList: FC<BlockUserListProps> = props => {
   const [errorMessage, setErrorMessage] = useState('')
   const timer = useRef<ReturnType<typeof setTimeout>>()
   const dispatch = useAppDispatch()
+  const [top, setTop] = useState(0)
+
+  const listRef = (ref: HTMLUListElement) => {
+    setTop(ref?.getBoundingClientRect().top ?? 0)
+  }
 
   const showMessage = (error: string) => {
     hideMessage()
@@ -221,7 +226,14 @@ const BlockUserList: FC<BlockUserListProps> = props => {
           </div>
         </ToolTip>
       </div>
-      <List style={{ marginTop: users.length ? 10 : 0 }}>
+      <List
+        ref={listRef}
+        style={{
+          marginTop: users.length ? 10 : 0,
+          maxHeight: `calc(100vh - ${top + 10}px)`,
+          overflowY: 'auto',
+        }}
+      >
         {users.map(({ slug, name, block }) => (
           <Item key={slug}>
             <div