位置:粘滞滚动仍在移动的元素 [英] position: sticky scroll still moving element

问题描述

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

I have a requirement of displaying something similar to a table with a sticking first column that can scroll horizontally.

该列粘滞了一段时间，但是当您滚动太多时，它开始与其余列一起移动:

The column is being sticky for a while but when you scroll too much it starts moving with the rest:

.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> 的情况下粘贴第一个全名"列，而这会带来麻烦.

How do I get that first Full Name column to be stickied without using a <table> which brings it's own baggage of issues.

推荐答案

问题似乎出在 row-data 上，宽度未达到行的末尾，从而影响了行为粘性元素.基本上 fullname 因为它的父级宽度而不再被卡住".

The problem seems to be with row-data, the width is not up to the end of the row which is affecting the behavior of sticky element. Basically fullname stops being "stuck" because it's parent width.

根据文档:

粘性定位元素是其计算位置的元素价值是粘性的.直到它被定位为相对位置包含块超过了指定的阈值(例如将top设置为在其流根(或其容器)中的值(不是auto)在其中滚动)，此时它被视为卡住"，直到碰到其包含块的相反边缘.

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

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

Add this to understand better:

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

问题是 header-container 和 data-container 的宽度越来越大:从 wrapper 父级开始250px.

The issue is header-container and data-container are getting width: 250px from the wrapper parent.

我的解决方案是添加一个新的 wrapper2 元素，该元素的固定宽度如下:

My solution would be to add a new wrapper2 element which will have a fixed width like so:

.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/也在这里

You can see it in action https://jsfiddle.net/noke7jc5/18/also here

这篇关于位置:粘滞滚动仍在移动的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！