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

feat(scrollbar): 隐藏侧边栏和内容区域滚动条并添加顶部滚动进度条

Browse Source
This commit is contained in:
Zuoling Rong
2025-05-05 23:48:09 +08:00
parent 10ce3e215c
commit 7e378c229c
3 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
assets/style.css
View File

@@ -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) {
@@ -1587,3 +1581,15 @@ body .content.expanded {
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;
}

24
src/script.js
View File

@@ -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 = '';

6
templates/index.html
View File

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