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:
+34
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user