位置粘性与弯曲方向列反向

Question

位置粘性与弯曲方向列反向

我正在尝试创建一个具有弯曲方向列反转的粘性中心元素。使用 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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Yud*_*ons 0

您能检查一下下面的代码吗？希望它对你有用。我们只需在父 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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，4 月前
查看次数：	1415 次
最近记录：	5 年，4 月前