为什么“位置:粘性"不适用于Core UI的Bootstrap CSS [英] Why is 'position: sticky' not working with Core UI's Bootstrap CSS

问题描述

我正在尝试使用找到的Core UI's react模板构建一个react仪表板这里.

I am trying to build a react dashboard using Core UI's react template found 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> &copy; 2018
      creativeLabs.
    </span>
    <span className="ml-auto">
      Powered by{" "}
      <a href="https://coreui.io/react">CoreUI for React</a>
    </span>
  </div>
</div>

但是在滚动时，该卡似乎没有粘住.

But on scroll the card does not seem to stick.

在inspecting上，存在CSS.在CSS树中也没有overflow: hidden.

On inspecting the CSS is present. Also no overflow: hidden is there in the CSS Tree.

推荐答案

问题是.app-body内部使用了溢出.有点棘手，但是在具有滚动元素和粘滞元素之间的任何元素上都不应设置overflow属性.

The issue is the use of overflow inside .app-body. It's a bit tricky but there should be no overflow property set to any element between the element that has the scroll and the sticky element.

这里是一个基本的例子来说明.滚动条位于视口上，并且我们有一个带有overflow:hidden(甚至是auto)的包装，因此，粘滞行为将不起作用.

Here is a basic example to illustrate. The scroll is on the viewport and we have a wrapper with overflow:hidden (or even auto) thus the sticky behavior won't work.

.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>

如果我们消除溢出，它将按预期工作:

If we remove the overflow, it will work as expected:

.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保留在包装器中，但是将滚动条移动到容器元素，则它也将起作用，因为滚动条和粘滞元素之间没有设置溢出的元素:

If we keep the overflow within the wrapper but we move the scroll to the container element it will also work because there is no element with overflow set between the scroll and the sticky element:

.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的Bootstrap CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！