位置:粘性滚动仍然移动元素

Question

我需要显示类似于表格的东西,其中第一列可以水平滚动.

该列有一段时间处于粘性状态,但是当您滚动太多时,它会开始与其余部分一起移动:

.wrapper {
  width: 250px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header-container, .row-data {
  display: flex;
  position: relative;
}

.header, .data {
  flex: 0 0 80px;
  padding: 1rem;
  background-color: lightblue;
}

.fullname {
  position: sticky;
  left: 0;
  background-color: orange;
}

<div class="container">
  <div class="wrapper">

    <div class="header-container">
      <div class="header fullname">Full Name</div>
      <div class="header">Test 1</div>
      <div class="header">Test 2</div>
      <div class="header">Test 3</div>
      <div class="header">Test 4</div>
    </div>
    
    <div class="data-container">
      <div class="row-data">
        <div class="data fullname">Full Name</div>
        <div class="data">Test 1</div>
        <div class="data">Test 2</div>
        <div class="data">Test 3</div>
        <div class="data">Test 4</div>
      </div>

      <div class="row-data">
        <div class="data fullname">Full Name</div>
        <div class="data">Test 1</div>
        <div class="data">Test 2</div>
        <div class="data">Test 3</div>
        <div class="data">Test 4</div>
      </div>
    </div>
  </div>
</div>

如何在不使用带有<table> 问题的第一个全名列的情况下进行粘贴.

Answer 1

问题似乎出在row-data，宽度未达到行尾，这影响了粘性元素的行为。基本上fullname不再被“卡住”，因为它是父级宽度。

根据文档：

粘性放置的元素是其计算的位置值为粘性的元素。它被视为相对定位，直到其包含的块在其流根（或其滚动到的容器）中超过指定的阈值（例如，将top设置为auto以外的值），在此点将其视为“卡住”，直到达到其包含块的相对边缘。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

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

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

问题是header-container并且data-container正在获得宽度：距离wrapper父级250像素。

我的解决方案是添加一个wrapper2具有固定宽度的新元素，如下所示：

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

.wrapper {
  width: 250px;
  overflow: auto;
}
.wrapper2 {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 600px;
}

.header-container, .row-data {
  display: flex;
  position: relative;
}

.header, .data {
  flex: 0 0 80px;
  padding: 1rem;
  background-color: lightblue;
}

.fullname {
  position: sticky;
  left: 0;
  background-color: orange;
}
.row-data {
  border:1px solid red;
}
.header-container {
  border:1px solid green;
}

您也可以在这里https://jsfiddle.net/noke7jc5/18/看到它