使用 flex-direction 列反向定位粘性答案

【问题标题】：Position sticky with flex-direction column reverse使用 flex-direction 列反向定位粘性
【发布时间】：2021-01-18 08:56:08
【问题描述】：

我正在尝试使用 flex-direction column-reverse 创建一个粘性中心元素。使用 flex-direction 列可以正常工作。列反转可以做到这一点吗？

.parent {
  display: flex;
  overflow-y: scroll;
    /*  works with flex-direction: column;   */
  flex-direction: column-reverse;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}
.child, .sticky {
  width: 100%;
  height: 40px;
  background: gold;
  border-bottom: 1px solid #555;
  flex-shrink: 0;
}

.sticky {
  background: crimson;
  position: sticky;
  top: 0;
  bottom: 0;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="sticky"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

【问题讨论】：

列反转的目的是什么，因为您的元素似乎都一样？
这是一个例子 - 我需要 flex-direction 列反向以无限滚动加载方向...

标签： html css flexbox sticky

【解决方案1】：

你能检查一下下面的代码吗？希望它对你有用。我们只需在父div中添加一个div .child-parent 并根据您的问题设置flex属性。

.parent {
  border: 1px solid #ccc;
  flex-direction: row;
}
.child-parent {
  overflow-y: scroll;
  height: 200px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  position: relative;
}

.child,
.sticky {
  width: 100%;
  height: 40px;
  background: gold;
  border-bottom: 1px solid #555;
  flex-shrink: 0;
  flex-direction: row;
}
.sticky {
  width: 100%;
  background: crimson;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  top: 0;
  display: flex;
  z-index: 1;
  flex-shrink: 0;
}

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <style>
        
    </style>
</head>

<body>
    <div class="parent">
        <div class="child-parent">
            <div class="child">1</div>
            <div class="child">2</div>
            <div class="child">3</div>
            <div class="child">4</div>
            <div class="child">5</div>
            <div class="child">6</div>
            <div class="child">7</div>
            <div class="child">8</div>
            <div class="child">9</div>
            <div class="child">10</div>
            <div class="sticky"></div>
            <div class="child">11</div>
            <div class="child">12</div>
            <div class="child">13</div>
            <div class="child">14</div>
            <div class="child">15</div>
            <div class="child">16</div>
            <div class="child">17</div>
            <div class="child">18</div>
            <div class="child">19</div>
        </div>
    </div>
</body>

</html>

【讨论】：

我们已编辑代码以解决 safari 浏览器的问题。希望它现在可以工作。
不幸的是，我想要 column-reverse 的原因是在上面加载更多项目可以保持滚动到位。您示例中的 parent-child 容器会破坏 safari 中的加载更多行为。如需澄清，请在 safari 中打开 codesandbox.io/s/…。向下滚动到粘性元素。单击“加载更多array1”注意粘性元素如何向下移动。这是不可取的。为了比较，请参阅所需的行为：codesandbox.io/s/…
根据您的参考，我们编辑我们的代码。你能检查一下更新的代码吗？
它不起作用。你可以看到它运行 sn-p