From 7e378c229c0ed4c3dfd6464403515c92294259ed Mon Sep 17 00:00:00 2001
From: Zuoling Rong <rzlrong@outlook.com>
Date: Mon, 5 May 2025 23:48:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(scrollbar):=20=E9=9A=90=E8=97=8F=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=92=8C=E5=86=85=E5=AE=B9=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E5=B9=B6=E6=B7=BB=E5=8A=A0=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E6=BB=9A=E5=8A=A8=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/style.css     | 52 ++++++++++++++++++++++++--------------------
 src/script.js        | 24 ++++++++++++++++++++
 templates/index.html |  6 +++--
 3 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 3b722b3..5983c43 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -402,9 +402,12 @@ body.loaded .layout {
     display: flex;
     flex-direction: column;
     gap: 0.6rem; /* 从1rem减小到0.6rem */
-    /* 自定义滚动条样式 */
-    scrollbar-width: thin; /* Firefox */
-    scrollbar-color: var(--scrollbar-color) transparent; /* Firefox */
+    /* 隐藏滚动条但保持滚动功能 */
+    scrollbar-width: none; /* Firefox */
+}
+
+.sidebar-content::-webkit-scrollbar {
+    display: none; /* Webkit browsers */
 }
 
 /* 折叠状态下的内容区域调整 */
@@ -577,35 +580,21 @@ body.loaded .layout {
     display: flex;
     flex-direction: column;
     align-items: center;
-    /* 应用自定义滚动条样式 */
-    scrollbar-width: thin; /* Firefox */
-    scrollbar-color: var(--scrollbar-color) transparent; /* Firefox */
+    /* 隐藏滚动条但保持滚动功能 */
+    scrollbar-width: none; /* Firefox */
     transition: background-color 0.3s ease, margin-left 0.3s ease, max-width 0.3s ease;
 }
 
+.content::-webkit-scrollbar {
+    display: none; /* Webkit browsers */
+}
+
 /* 优化内容区域在侧边栏折叠状态下的边距 */
 body .content.expanded {
     margin-left: var(--sidebar-collapsed-width);
     max-width: calc(100vw - var(--sidebar-collapsed-width));
 }
 
-.content::-webkit-scrollbar {
-    width: 7px; /* 统一滚动条宽度 */
-}
-
-.content::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.content::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-color);
-    border-radius: 4px;
-}
-
-.content::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-hover-color);
-}
-
 /* 搜索框容器 - 固定在顶部 */
 .search-container {
     width: 100%;
@@ -1274,6 +1263,11 @@ body .content.expanded {
         bottom: 1rem;
         right: 1rem;
     }
+
+    /* 移动端滚动进度条调整 */
+    .scroll-progress {
+        height: 4px; /* 移动端略粗一些 */
+    }
 }
 
 @media (max-width: 480px) {
@@ -1586,4 +1580,16 @@ body .content.expanded {
     .sidebar.active .submenu-item {
         padding: 0.5rem 0.6rem;
     }
+}
+
+/* 滚动进度指示条 */
+.scroll-progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 3px;
+    width: 0;
+    background-color: var(--accent-color);
+    z-index: 1000;
+    transition: width 0.1s ease-out;
 }
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index c00db30..33206dd 100644
--- a/src/script.js
+++ b/src/script.js
@@ -36,6 +36,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const themeToggle = document.querySelector('.theme-toggle');
     const themeIcon = themeToggle.querySelector('i');
     
+    // 滚动进度条元素
+    const scrollProgress = document.querySelector('.scroll-progress');
+    
     // 移除预加载类，允许CSS过渡效果
     document.documentElement.classList.remove('preload');
     
@@ -233,8 +236,25 @@ document.addEventListener('DOMContentLoaded', () => {
             sidebar.classList.remove('collapsed');
             content.classList.remove('expanded');
         }
+        
+        // 重新计算滚动进度
+        updateScrollProgress();
     });
 
+    // 更新滚动进度条
+    function updateScrollProgress() {
+        const scrollTop = content.scrollTop || 0;
+        const scrollHeight = content.scrollHeight - content.clientHeight || 1;
+        const scrollPercent = (scrollTop / scrollHeight) * 100;
+        scrollProgress.style.width = scrollPercent + '%';
+    }
+    
+    // 监听内容区域的滚动事件
+    content.addEventListener('scroll', updateScrollProgress);
+    
+    // 初始化时更新一次滚动进度
+    updateScrollProgress();
+
     // 页面切换功能
     function showPage(pageId, skipSearchReset = false) {
         if (currentPageId === pageId && !skipSearchReset && !isInitialLoad) return;
@@ -261,6 +281,10 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
         
+        // 重置滚动位置并更新进度条
+        content.scrollTop = 0;
+        updateScrollProgress();
+        
         // 只有在非搜索状态下才重置搜索
         if (!skipSearchReset) {
             searchInput.value = '';
diff --git a/templates/index.html b/templates/index.html
index 330711e..9520cb6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -34,6 +34,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body class="loading">
+    <!-- 滚动进度指示条 -->
+    <div class="scroll-progress"></div>
     <div class="layout">
         <!-- 移动端按钮 -->
         <div class="mobile-buttons">
@@ -71,8 +73,8 @@
             </div>
 
             <div class="copyright">
-                <p>© {{CURRENT_YEAR}} <a href="https://github.com/rbetree/menav" target="_blank">MeNav</a></p>
-                <p>by <a href="https://github.com/rbetree" target="_blank">rbetree</a></p>
+                <p>© {{CURRENT_YEAR}} <a href="https://github.com/rbetree/menav" target="_blank" rel="noopener">MeNav</a></p>
+                <p>by <a href="https://github.com/rbetree" target="_blank" rel="noopener">rbetree</a></p>
             </div>
         </nav>