🎨 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:
@@ -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',
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user