为什么 'position: sticky' 不能与核心 UI 的 Bootstrap CSS 一起工作
Why is 'position: sticky' not working with Core UI's Bootstrap CSS
我正在尝试使用找到的 Core UI's
反应模板构建反应仪表板 here。
CSS
.top-stick {
position: sticky !important;
position: -webkit-sticky;
top: 5rem;
overflow-y: auto;
height: calc(100vh - 5rem);
}
JSX
<div className="animated fadeIn">
<Row className="app-scrollable-body">
<Col xs="12" sm="4" md="3" className="top-stick">
<Card className="toic">
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
<Col xs="12" sm="8" md="9">
<Card>
<CardHeader>Card title</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
</Row>
<div className="app-fixed-footer">
<span>
<a href="https://coreui.io">CoreUI</a> © 2018
creativeLabs.
</span>
<span className="ml-auto">
Powered by{" "}
<a href="https://coreui.io/react">CoreUI for React</a>
</span>
</div>
</div>
但在滚动时卡片似乎没有粘住。
在 inspecting
上存在 CSS
。 CSS
树中也没有 overflow: hidden
。
问题是 .app-body
中溢出的使用。这有点棘手,但不应该将 overflow
属性 设置为具有滚动元素和粘性元素之间的任何元素。
这里用一个基本的例子来说明。滚动条在视口上,我们有一个带有 overflow:hidden
(甚至 auto
)的包装器,因此粘性行为将不起作用。
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
如果我们移除溢出,它将按预期工作:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
如果我们将 overflow
保留在包装器中,但我们将滚动条移动到容器元素,它也会起作用,因为在滚动条和粘性元素之间没有设置溢出的元素:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
max-height:200px;
overflow:auto;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
相关:
我正在尝试使用找到的 Core UI's
反应模板构建反应仪表板 here。
CSS
.top-stick {
position: sticky !important;
position: -webkit-sticky;
top: 5rem;
overflow-y: auto;
height: calc(100vh - 5rem);
}
JSX
<div className="animated fadeIn">
<Row className="app-scrollable-body">
<Col xs="12" sm="4" md="3" className="top-stick">
<Card className="toic">
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
<Col xs="12" sm="8" md="9">
<Card>
<CardHeader>Card title</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
</Row>
<div className="app-fixed-footer">
<span>
<a href="https://coreui.io">CoreUI</a> © 2018
creativeLabs.
</span>
<span className="ml-auto">
Powered by{" "}
<a href="https://coreui.io/react">CoreUI for React</a>
</span>
</div>
</div>
但在滚动时卡片似乎没有粘住。
在 inspecting
上存在 CSS
。 CSS
树中也没有 overflow: hidden
。
问题是 .app-body
中溢出的使用。这有点棘手,但不应该将 overflow
属性 设置为具有滚动元素和粘性元素之间的任何元素。
这里用一个基本的例子来说明。滚动条在视口上,我们有一个带有 overflow:hidden
(甚至 auto
)的包装器,因此粘性行为将不起作用。
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
如果我们移除溢出,它将按预期工作:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
如果我们将 overflow
保留在包装器中,但我们将滚动条移动到容器元素,它也会起作用,因为在滚动条和粘性元素之间没有设置溢出的元素:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
max-height:200px;
overflow:auto;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
相关: