为什么在可滚动容器中没有position:sticky与left:0一起工作? [英] Why isn't position:sticky with left:0 working inside a scrollable container?

问题描述

我有这个问题-我有一个包含一些行的容器，并且在每一行中都有一个粘性的左列，然后还有多个其他列.现在，在下面的示例中，它可以工作一会儿，但是当您滚动父容器时，粘性位置不再起作用，并且在滚动时也会被粘贴.

I have this problem - I have a container that contains some rows and in each row there is a sticky left column and then multiple other columns. Now in the example below this works for a little while but as you scroll the parent container the position sticky no longer works and it gets pushed along as you scroll.

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  width: 100%;
  
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

有什么办法解决这个问题吗?还是有另一种方法可以解决这个问题?

Is there any way to solve this.. or is there another way to accomplish this??

我想要的结果是能够将粘滞div粘在左侧的0上，并使其他列在下面滚动.

My desired result is to be able to have the sticky div stuck on that left side a 0 and have the other columns scroll underneath..

现在，我确实知道，如果overflow-x: scroll在实际的.row元素上，它将按预期工作..但是我可能有100多行，因此滚动需要在父容器上

Now I do know that if the overflow-x: scroll is on the actual .row element it works as expected.. but I may have 100+ rows so the scroll needs to be on the parent container

推荐答案

添加边框以更好地了解与使用块级元素和width:100%的限制(不是您正在设置的那个)有关的问题.没有用，但是块元素的默认行为)

Add border to better see the issue which is related to the use a block level element and the restriction of width:100% (not the one your are setting which is useless but the default behavior of block elements)

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

考虑使用inline-flex的内联级别元素来解决此问题.如果内容较小，请添加min-width:100%以确保至少覆盖100%宽度.

Consider an inline level element using inline-flex to solve the issue. Add min-width:100% to make sure you cover at least 100% of width if the content is small.

.container {
  overflow-x: scroll;
}

.row {
  display: inline-flex;
  min-width: 100%;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

一些相关问题:

左为零的嵌套粘性元素不具有粘性

为什么在CSS中使用位置粘滞性时，我的元素为什么不向左粘住?

这篇关于为什么在可滚动容器中没有position:sticky与left:0一起工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！