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 {
|
.app {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -7,6 +18,7 @@
|
|||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.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) {
|
@media (max-width: 399px) {
|
||||||
.nav {
|
.nav {
|
||||||
|
|||||||
Reference in New Issue
Block a user