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/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/此处查看它

Answer 2

如8月份所述，我认为持仓并不是解决您问题的最佳方法。

我使用绝对定位进行了类似的处理。使用伪元素和数据属性将标题放在行之前。

.wrapper {
  width: 250px;
  padding-left: 120px;
  position: relative;
  background-color: orange;
}

.inner {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.header-container,
.row-data {
  display: flex;
}

.header, .data {
  flex: 0 0 80px;
  padding: 1rem;
  background-color: lightblue;
}

.header-container::before,
.row-data::before{
  content: attr(data-title);
  left: 0px;
  padding: 1rem;
  position: absolute;
}

<div class="container">
  <div class="wrapper">
    <div class="inner">
      <div class="header-container" data-title="Fullname">
        <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" data-title="Fullname">
          <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" data-title="Fullname">
          <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>
</div>

Answer 3

解决了问题...使用粘粘纸时，您需要为容器指定宽度。

就我而言，一旦我通过将所有列的宽度加起来为.row-data和.header-container指定了宽度，就可以正常工作。

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

3 个答案: