修复滚动条和侧边栏显示问题

assets/style.css

@@ -5,9 +5,33 @@
     box-sizing: border-box;
 }
 
+/* 通用滚动条样式 */
+.custom-scrollbar {
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
+}
+
+/* Webkit滚动条样式（Chrome, Safari, Edge等） */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 7px; /* 统一滚动条宽度 */
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.15); /* 更柔和的颜色 */
+    border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.25); /* 悬停时稍微亮一点 */
+}
+
 /* 防止滚动条导致的布局偏移 */
 html {
-    overflow-y: scroll; /* 始终显示垂直滚动条 */
+    overflow-y: hidden; /* 改为hidden，移除强制显示的滚动条 */
     scrollbar-width: thin; /* Firefox */
 }
 
@@ -109,44 +133,75 @@ body {
 .sidebar {
     width: 240px;
     background-color: #2d2e32;
-    padding: 2rem 1.2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
-    overflow-y: auto;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 100;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform: translateZ(0);
     height: 100vh; /* 确保高度固定 */
+    /* 使用Grid布局分为三个部分 */
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: 
+        "header"
+        "content"
+        "footer";
+    /* 应用自定义滚动条样式 */
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
+    overflow-y: hidden; /* 防止整个侧边栏滚动 */
 }
 
-.sidebar::-webkit-scrollbar {
+/* 侧边栏头部区域 */
-    width: 6px;
+.sidebar .logo {
+    grid-area: header;
+    padding: 1.5rem 1.2rem 0.8rem; /* 调整上下padding更均衡 */
 }
 
-.sidebar::-webkit-scrollbar-track {
+/* 侧边栏内容区域 - 可滚动 */
-    background: transparent;
+.sidebar-content {
+    grid-area: content;
+    overflow-y: auto; /* 只有内容区域可滚动 */
+    padding: 0 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem; /* 从2rem减小到1rem */
+    /* 自定义滚动条样式 */
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
 }
 
-.sidebar::-webkit-scrollbar-thumb {
+/* 侧边栏底部区域 - 版权信息 */
-    background-color: rgba(255, 255, 255, 0.1);
+.sidebar .copyright {
-    border-radius: 3px;
+    grid-area: footer;
+    padding: 1rem 1.2rem;
+    text-align: center;
+    color: #8b8c8f;
+    font-size: 0.85rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    background-color: #2d2e32; /* 与侧边栏背景色相同 */
+    margin-top: 0;
 }
 
-.sidebar::-webkit-scrollbar-thumb:hover {
+.copyright a {
-    background-color: rgba(255, 255, 255, 0.2);
+    color: #4a9eff;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.copyright a:hover {
+    color: #3a8eef;
+    text-decoration: underline;
 }
 
 .logo h1 {
     font-size: 1.4rem;
     color: #fff;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     padding-left: 0.5rem;
     letter-spacing: 0.5px;
 }
@@ -155,14 +210,14 @@ body {
 .nav-section {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.4rem; /* 稍微减小导航项之间的间距 */
 }
 
 .section-title {
     font-size: 1rem;
     color: #4a9eff;
     padding: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.4rem; /* 稍微减小标题底部边距 */
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -230,17 +285,19 @@ body {
     background-color: #1a1b1e;
     position: relative;
     height: 100vh; /* 固定高度 */
-    overflow-y: scroll; /* 始终使用滚动，而不是auto */
+    overflow-y: auto; /* 使用auto替代scroll，只在需要时显示滚动条 */
     overflow-x: hidden;
     max-width: calc(100vw - 240px);
     display: flex;
     flex-direction: column;
     align-items: center;
+    /* 应用自定义滚动条样式 */
     scrollbar-width: thin; /* Firefox */
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
 }
 
 .content::-webkit-scrollbar {
-    width: 8px; /* 固定滚动条宽度 */
+    width: 7px; /* 统一滚动条宽度 */
 }
 
 .content::-webkit-scrollbar-track {
@@ -248,12 +305,12 @@ body {
 }
 
 .content::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.15); /* 更柔和的颜色 */
     border-radius: 4px;
 }
 
 .content::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.25); /* 悬停时稍微亮一点 */
 }
 
 /* 搜索框容器 - 固定在顶部 */
@@ -752,6 +809,8 @@ body {
         margin-left: 0;
         max-width: 100vw;
         padding: 4.5rem 1rem 2rem;
+        height: 100vh; /* 确保在移动端也是100vh高度 */
+        overflow-y: auto; /* 保持auto设置一致 */
     }
 
     /* 侧边栏样式 */
@@ -760,6 +819,12 @@ body {
         transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
         width: 240px;
         z-index: 150;
+        /* 调整Grid布局在移动端的表现 */
+        grid-template-rows: minmax(80px, auto) 1fr auto;
+    }
+
+    /* 移动端侧边栏头部调整 */
+    .sidebar .logo {
         padding-top: calc(2rem + 60px); /* 增加顶部padding，为按钮留出空间 */
     }
 
@@ -971,24 +1036,3 @@ body {
         transform: scale(1);
     }
 }
-
-/* 版权声明 */
-.copyright {
-    margin-top: auto;
-    padding-top: 1rem;
-    text-align: center;
-    color: #8b8c8f;
-    font-size: 0.85rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.copyright a {
-    color: #4a9eff;
-    text-decoration: none;
-    transition: all 0.3s ease;
-}
-
-.copyright a:hover {
-    color: #3a8eef;
-    text-decoration: underline;
-}

src/generator.js

@@ -236,6 +236,7 @@ function generateHTML(config) {
                 <h1>导航站</h1>
             </div>
             
+            <div class="sidebar-content">
                 <div class="nav-section">
 ${generateNavigation(config.navigation)}
                 </div>
@@ -246,6 +247,7 @@ ${generateNavigation(config.navigation)}
                     </div>
 ${generateSocialLinks(config.social)}
                 </div>
+            </div>
 
             <div class="copyright">
                 <p>© ${currentYear} <a href="https://github.com/rbetree/menav" target="_blank">MeNav</a></p>

templates/index.html

@@ -34,6 +34,7 @@
                 <h1>{{SITE_LOGO_TEXT}}</h1>
             </div>
             
+            <div class="sidebar-content">
                 <div class="nav-section">
                     {{NAVIGATION}}
                 </div>
@@ -44,6 +45,7 @@
                     </div>
                     {{SOCIAL_LINKS}}
                 </div>
+            </div>
 
             <div class="copyright">
                 <p>© {{CURRENT_YEAR}} <a href="https://github.com/rbetree/menav" target="_blank">MeNav</a></p>