🎨 style: disable y-axis scrolling for semi-layout components

- Hide scrollbars for .semi-layout, .semi-layout-content, and .semi-sider
- Set scrollbar width and height to 0 for webkit browsers
- Add cross-browser scrollbar hiding support (webkit, firefox, IE/Edge)
- Change Content container overflow from 'auto' to 'hidden' on desktop
- Remove redundant scrollbar styling (thumb, hover, track styles)

This ensures that all semi-layout related components have no visible
scrollbars and prevents vertical scrolling functionality entirely.

Files modified:
- web/src/index.css
- web/src/components/layout/PageLayout.js
This commit is contained in:
Apple\Apple
2025-06-10 01:42:38 +08:00
parent f2957ee558
commit fe00434454
2 changed files with 13 additions and 73 deletions

View File

@@ -134,7 +134,7 @@ const PageLayout = () => {
<Content <Content
style={{ style={{
flex: '1 0 auto', flex: '1 0 auto',
overflowY: styleState.isMobile ? 'visible' : 'auto', overflowY: styleState.isMobile ? 'visible' : 'hidden',
WebkitOverflowScrolling: 'touch', WebkitOverflowScrolling: 'touch',
padding: shouldInnerPadding ? (styleState.isMobile ? '5px' : '24px') : '0', padding: shouldInnerPadding ? (styleState.isMobile ? '5px' : '24px') : '0',
position: 'relative', position: 'relative',

View File

@@ -15,20 +15,9 @@
/* ==================== 全局基础样式 ==================== */ /* ==================== 全局基础样式 ==================== */
body { body {
margin: 0; font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei', sans-serif;
padding-top: 0; color: var(--semi-color-text-0);
font-family: background-color: var(--semi-color-bg-0);
Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-width: none;
color: var(--semi-color-text-0) !important;
background-color: var(--semi-color-bg-0) !important;
height: 100vh;
}
body::-webkit-scrollbar {
display: none;
} }
code { code {
@@ -36,34 +25,20 @@ code {
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
} }
#root {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ==================== 布局相关样式 ==================== */ /* ==================== 布局相关样式 ==================== */
.semi-layout::-webkit-scrollbar,
.semi-layout-content::-webkit-scrollbar, .semi-layout-content::-webkit-scrollbar,
.semi-sider::-webkit-scrollbar { .semi-sider::-webkit-scrollbar {
width: 6px; display: none;
height: 6px; width: 0;
height: 0;
} }
.semi-layout-content::-webkit-scrollbar-thumb, .semi-layout,
.semi-sider::-webkit-scrollbar-thumb { .semi-layout-content,
background: var(--semi-color-tertiary-light-default); .semi-sider {
border-radius: 3px; -ms-overflow-style: none;
} scrollbar-width: none;
.semi-layout-content::-webkit-scrollbar-thumb:hover,
.semi-sider::-webkit-scrollbar-thumb:hover {
background: var(--semi-color-tertiary);
}
.semi-layout-content::-webkit-scrollbar-track,
.semi-sider::-webkit-scrollbar-track {
background: transparent;
} }
/* ==================== 导航和侧边栏样式 ==================== */ /* ==================== 导航和侧边栏样式 ==================== */
@@ -438,41 +413,6 @@ code {
/* ==================== 响应式/移动端样式 ==================== */ /* ==================== 响应式/移动端样式 ==================== */
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
#root>section>header>section>div>div>div>div.semi-navigation-footer>div>a>li {
padding: 0 0;
}
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li {
padding: 0 5px;
}
#root>section>header>section>div>div>div>div.semi-navigation-footer>div:nth-child(1)>a>li {
padding: 0 5px;
}
.semi-navigation-horizontal .semi-navigation-header {
margin-right: 0;
}
/* 确保移动端内容可滚动 */
.semi-layout-content {
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-y: auto !important;
}
/* 修复移动端下拉刷新 */
body {
overflow: visible !important;
overscroll-behavior-y: auto !important;
position: static !important;
height: 100% !important;
}
/* 确保内容区域在移动端可以正常滚动 */
#root {
overflow: visible !important;
height: 100% !important;
}
/* 移动端表格样式调整 */ /* 移动端表格样式调整 */
.semi-table-tbody, .semi-table-tbody,