From 8a1b6a2d905b97aaa0ec4b57b8fff168612a59d7 Mon Sep 17 00:00:00 2001
From: rbetree <rzlrong@outlook.com>
Date: Sun, 4 Jan 2026 22:44:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=8E=BB=E9=99=A4=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E8=BF=9B=E5=BA=A6=E6=9D=A1&=E6=81=A2=E5=A4=8D?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/style.css              | 53 ++++++++++++++++++++---------------
 src/script.js                 | 21 --------------
 templates/layouts/default.hbs |  2 --
 3 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index a72e985..4ad7763 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -720,14 +720,39 @@ body.loaded .layout {
     display: flex;
     flex-direction: column;
     align-items: center;
-    /* 隐藏滚动条但保持滚动功能 */
-    scrollbar-width: none;
-    /* Firefox */
+    /* 防止“有无滚动条”导致内容横向平移（支持的浏览器会稳定预留滚动条槽位） */
+    scrollbar-gutter: stable;
+    /* 自定义滚动条颜色（Firefox） */
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) transparent;
 }
 
+/* 自定义滚动条（Chromium / Safari） */
 .content::-webkit-scrollbar {
-    display: none;
-    /* Webkit browsers */
+    width: 8px;
+}
+
+.content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.content::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    border-radius: var(--radius-full);
+    /* 用透明边框制造“内边距”，更贴合卡片阴影风格 */
+    border: 2px solid transparent;
+    background-clip: content-box;
+}
+
+.content::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-hover-color);
+}
+
+/* 回退：不支持 scrollbar-gutter 的浏览器，强制始终显示滚动条以避免横向抖动 */
+@supports not (scrollbar-gutter: stable) {
+    .content {
+        overflow-y: scroll;
+    }
 }
 
 /* 优化内容区域在侧边栏折叠状态下的边距 */
@@ -2491,12 +2516,6 @@ body .content.expanded {
         right: 1rem;
     }
 
-    /* 移动端滚动进度条调整 */
-    .scroll-progress {
-        height: var(--radius-sm);
-        /* 移动端略粗一些 */
-    }
-
     .sidebar .submenu {
         margin-left: 1rem;
     }
@@ -3001,15 +3020,3 @@ body .content.expanded {
         display: none;
     }
 }
-
-/* 滚动进度指示条 */
-.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;
-}
diff --git a/src/script.js b/src/script.js
index b183309..f96c25f 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1174,9 +1174,6 @@ 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');
 
@@ -1418,25 +1415,8 @@ 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;
@@ -1465,7 +1445,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 重置滚动位置并更新进度条
     content.scrollTop = 0;
-    updateScrollProgress();
 
     // 只有在非搜索状态下才重置搜索
     if (!skipSearchReset) {
diff --git a/templates/layouts/default.hbs b/templates/layouts/default.hbs
index 0bc1422..3057a32 100644
--- a/templates/layouts/default.hbs
+++ b/templates/layouts/default.hbs
@@ -39,8 +39,6 @@
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"></noscript>
 </head>
 <body class="loading">
-    <!-- 滚动进度指示条 -->
-    <div class="scroll-progress"></div>
     <div class="layout">
         <!-- 移动端按钮 -->
         <div class="mobile-buttons">