chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Zuoling Rong
2025-05-01 09:55:28 +08:00
parent 93f36fa559
commit 1660eed771
4 changed files with 1204 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
assets/style.css
View File

@@ -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);
border-radius: 3px;
/* 侧边栏底部区域 - 版权信息 */
.sidebar .copyright {
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 {
background-color: rgba(255, 255, 255, 0.2);
.copyright a {
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;
}

1102
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
src/generator.js
View File

@@ -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>

2
templates/index.html
View File

@@ -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>