update

components/VirtualScroll/index.tsx

@@ -52,7 +52,7 @@ export default function VirtualScroll(props: VirtualScrollProps) {
   const setWrapRef = useCallback((ele: HTMLDivElement) => {
     if (ele) {
       setWrapElement(ele);
-      ele.scrollTo(0, scrollY);
+      // ele.scrollTo(0, scrollY);
       if (ele) setWrapHeight(ele.clientHeight);
     } else {
       setWrapElement(null);
@@ -70,6 +70,15 @@ export default function VirtualScroll(props: VirtualScrollProps) {
     };
   }, [resize]);
 
+  useEffect(() => {
+    if (wrapElement) {
+      const y = startIndex * itemHeight;
+      setScrollY(y);
+      wrapElement.scrollTo({ left: 0, top: y, behavior: "auto" });
+    }
+    return () => {};
+  }, [itemHeight, startIndex, wrapElement]);
+
   return (
     <div
       ref={setWrapRef}

pages/novel/[slug]/[chapter].tsx

@@ -103,7 +103,7 @@ const Chapter: NextPageWithLayout = () => {
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img src="/logo.svg" alt="NovelDit" />
         </Link>
-        <div className="flex-1">
+        <div className="flex-1 w-0">
           <div className="text-base breadcrumbs">
             <ul>
               <li>
@@ -172,28 +172,28 @@ const Chapter: NextPageWithLayout = () => {
             </footer>
           </article>
         </div>
-        <div
-          className={clsx(styles["toolbar-display"], {
-            hidden: !menu,
-          })}
-          onClick={handleStopPropagation}
-        >
-          {menu === "settings" ? (
-            <Settings
-              isSerif={isSerif}
-              fontSize={fontSize}
-              changeIsSerif={handleSetIsSerif}
-              changeFontSize={handleSetFontSize}
-            />
-          ) : null}
-          {menu === "toc" ? (
-            <Toc
-              novel={query.slug as string}
-              chapter={query.chapter as string}
-              onChangeSettings={handleChangeSettings}
-            />
-          ) : null}
-        </div>
+        {menu ? (
+          <div
+            className={styles["toolbar-display"]}
+            onClick={handleStopPropagation}
+          >
+            {menu === "settings" ? (
+              <Settings
+                isSerif={isSerif}
+                fontSize={fontSize}
+                changeIsSerif={handleSetIsSerif}
+                changeFontSize={handleSetFontSize}
+              />
+            ) : null}
+            {menu === "toc" ? (
+              <Toc
+                novel={query.slug as string}
+                chapter={query.chapter as string}
+                onChangeSettings={handleChangeSettings}
+              />
+            ) : null}
+          </div>
+        ) : null}
       </main>
       <Toolbar
         open={open}

styles/chapter.module.scss

@@ -30,7 +30,7 @@
     @apply text-2xl font-bold;
   }
   p {
-    @apply my-3;
+    @apply my-[1em] leading-[1.5];
   }
 }
 .toolbar {
@@ -95,7 +95,7 @@
           }
         }
         i {
-          @apply w-9 mr-1 flex-shrink-0 not-italic text-slate-400;
+          @apply w-11 mr-1 flex-shrink-0 not-italic text-slate-400;
         }
         strong {
           @apply block font-normal flex-1 whitespace-nowrap w-0 overflow-hidden text-ellipsis text-gray-100;

styles/globals.scss

@@ -401,9 +401,9 @@
   @apply text-lg font-bold mt-4 mb-2;
 }
 .breadcrumbs {
-  @apply max-w-full overflow-x-auto;
+  @apply max-w-full;
   ul {
-    @apply flex items-center whitespace-nowrap;
+    @apply flex items-center whitespace-nowrap w-full overflow-hidden text-ellipsis;
     li {
       @apply flex items-center;
       a {