html - 位置 : sticky scroll still moving element

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 不再被“卡住”，因为它是父宽度。

根据文档:

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

添加这个以便更好地理解:

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

问题是 header-container 和 data-container 正在从 wrapper 父级获取宽度:250px。

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

.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;
}

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

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

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

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