Html 位置：粘滞滚动仍在移动的元素

我需要显示类似于表的内容，第一列可以水平滚动

该列有一段时间处于粘滞状态，但当您滚动太多时，它会开始与其他列一起移动：

.wrapper{
宽度：250px；
溢出：自动；
显示器：flex；
弯曲方向：立柱；
位置：相对位置；
}
.header容器，.row数据{
显示器：flex；
位置：相对位置；
}
.header、.data{
flex:080px；
填充：1rem；
背景颜色：浅蓝色；
}
.全名{
位置：粘性；
左：0；
背景颜色：橙色；
}

全名
测试1
测试2
测试3
测试4
全名
测试1
测试2
测试3
测试4
全名
测试1
测试2
测试3
测试4

问题似乎出在

行数据上

，宽度不到行的末尾，这会影响粘滞元素的行为。基本上，

fullname

不再被“卡住”，因为它是父宽度

根据文件：

粘性定位图元是指其计算位置 价值是粘性的。它被视为相对定位，直到其 包含块超过指定的阈值（例如将顶部设置为 在其流根（或它所属的容器）中的 滚动），此时将被视为“卡住”，直到 与包含块的相对边缘相遇。

添加以下内容以更好地理解：

.row-data {
  border: 1px solid red;
}

问题是

标题容器

和

数据容器

正在从

包装器

父容器获取宽度：250px

我的解决方案是添加一个新的

wrapper2

元素，该元素具有固定的宽度，如下所示：

.wrapper{
宽度：250px；
溢出：自动；
}
.wrapper 2{
显示器：flex；
弯曲方向：立柱；
位置：相对位置；
宽度：600px；
}
.header容器，.row数据{
显示器：flex；
位置：相对位置；
}
.header、.data{
flex:080px；
填充：1rem；
背景颜色：浅蓝色；
}
.全名{
位置：粘性；
左：0；
背景颜色：橙色；
}
.行数据{
边框：1px纯红；
}
.收割台容器{
边框：1px纯绿色；
}

全名1a
测试1a
测试2a
测试3a
测试4a
全名2b
测试1b
测试2b
测试3b
测试4b
全名3c
测试1c
测试2c
测试3c
测试4c

正如8月份所述，我认为位置粘性不是解决您问题的最佳方案

我用绝对定位做了一个类似的方法。使用伪元素和数据属性将标题置于行之前

.wrapper{
宽度：250px；
左侧填充：120px；
位置：相对位置；
背景颜色：橙色；
}
.内部{
显示器：flex；
弯曲方向：立柱；
溢出：自动；
}
.收割台容器，
.行数据{
显示器：flex；
}
.header、.data{
flex:080px；
填充：1rem；
背景颜色：浅蓝色；
}
.header容器：：之前，
.行数据：：之前{
内容：attr（数据标题）；
左：0px；
填充：1rem；
位置：绝对位置；
}

测试1
测试2
测试3
测试4
测试1
测试2
测试3
测试4
测试1
测试2
测试3
测试4

解决了这个问题。。。使用sticky时，需要指定容器的宽度

---

在我的例子中，有一次我为.row data和.header容器指定了一个宽度，通过将所有列的宽度相加，它工作得很好。

我喜欢这个解决方案，不幸的是，可能无法使用它，因为行还有一个编辑模式，在每个单元格中显示一个下拉列表。但我会记住这是一个简洁的解决方案。我确实找到了我在下面发布的问题的解决方案。这与我在我的答案中发布的类似。