html - 为什么 position:sticky with left:0 不能在可滚动容器内工作?
问题描述
我有这个问题 - 我有一个包含一些行的容器,在每一行中都有一个粘性左列,然后是多个其他列。现在在下面的示例中,这可以工作一段时间,但是当您滚动父容器时,位置sticky 不再起作用,并且在您滚动时它会被推动。
.container {
overflow-x: scroll;
}
.row {
display: flex;
width: 100%;
}
.item {
min-width: 173px;
}
.sticky {
min-width: 250px;
position: sticky;
left: 0;
background: red;
}
<div class="container">
<div class="row">
<div class="item sticky">STICKY ROW 1</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<div class="row">
<div class="item sticky">STICKY ROW 2</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<div class="row">
<div class="item sticky">STICKY ROW 3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
有什么办法可以解决这个问题..还是有另一种方法可以做到这一点?
我想要的结果是能够将粘性 div 卡在左侧 a0
并让其他列在下面滚动..
现在我知道如果overflow-x: scroll
它在实际.row
元素上它按预期工作..但我可能有 100+ 行所以滚动需要在父容器上
解决方案
添加边框以更好地查看与使用块级元素和限制相关的问题width:100%
(不是您设置的无用但块元素的默认行为)
.container {
overflow-x: scroll;
}
.row {
display: flex;
border:1px solid;
}
.item {
min-width: 173px;
}
.sticky {
min-width: 250px;
position: sticky;
left: 0;
background: red;
}
<div class="container">
<div class="row">
<div class="item sticky">STICKY ROW 1</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<div class="row">
<div class="item sticky">STICKY ROW 2</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<div class="row">
<div class="item sticky">STICKY ROW 3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
考虑使用内联级别元素inline-flex
来解决问题。如果内容很小,请添加min-width:100%
以确保至少覆盖宽度。100%
.container {
overflow-x: scroll;
}
.row {
display: inline-flex;
min-width: 100%;
border:1px solid;
}
.item {
min-width: 173px;
}
.sticky {
min-width: 250px;
position: sticky;
left: 0;
background: red;
}
<div class="container">
<div class="row">
<div class="item sticky">STICKY ROW 1</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<div class="row">
<div class="item sticky">STICKY ROW 2</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<div class="row">
<div class="item sticky">STICKY ROW 3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
一些相关问题:
推荐阅读
- mysql - SQLSTATE[HY000]: errno: 150 "外键约束格式不正确
- ios - 当整个屏幕设置为 RTL 时,我们如何将语义更改为 tableview 单元格的 LTR?
- java - Java:如何生成 KeyPair 形式的私钥,只使用没有 BouncyCastle 的纯 Java.Security?
- string - 使用应用程序语言(最好是批处理脚本)拆分出现次数可变的字符串
- css - 无法使用 Flexbox 使 div 右对齐
- mongodb - Loopback 4:当与 MongoDB 建立连接时,测试永远不会结束
- javascript - 当我增加 textcontent 值时,减少按钮仍然被禁用
- postgresql - 在 Postgres 中更改分区表的表空间
- java - 如何通过 selenium 使用多个主机 ip 访问负载均衡器?
- flutter - 转换地图
数据到类数据