style(ui): 隐藏页面滚动条并优化滚动处理

- 添加html和body的overflow hidden样式以隐藏滚动条
- 在.app容器中添加overflow auto以支持内容滚动
- 为.app、.nav-collapse-content.show和.timestamp-display组件添加滚动条隐藏样式
- 包含WebKit、Firefox和IE/Edge浏览器的兼容性样式
- 修复了页面滚动条显示问题
This commit is contained in:
雨霖铃
2026-01-07 23:34:18 +08:00
parent cef700a89b
commit 259bc51dc5
+34
View File
@@ -1,3 +1,14 @@
/* 隐藏页面滚动条 */
html {
overflow: hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.app {
max-width: 800px;
margin: 0 auto;
@@ -7,6 +18,7 @@
min-width: 320px;
height: 100vh;
box-sizing: border-box;
overflow: auto;
}
.nav {
@@ -284,6 +296,28 @@
}
}
/* 隐藏滚动条样式 */
/* WebKit浏览器 (Chrome, Safari, Edge) */
.app::-webkit-scrollbar,
.nav-collapse-content.show::-webkit-scrollbar,
.timestamp-display::-webkit-scrollbar {
display: none;
}
/* Firefox */
.app,
.nav-collapse-content.show,
.timestamp-display {
scrollbar-width: none;
}
/* IE/Edge 10+ */
.app,
.nav-collapse-content.show,
.timestamp-display {
-ms-overflow-style: none;
}
/* 超小屏幕适配 - 修复边框遮挡问题 */
@media (max-width: 399px) {
.nav {