refactor: 去除顶部进度条&恢复滚动条

2026-01-04 22:44:16 +08:00
parent a9275ffc6d
commit 8a1b6a2d90
3 changed files with 30 additions and 46 deletions
--- 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;
-}
--- 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) {
--- 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">