为什么 position:sticky with left:0 在可滚动容器内不工作? [英] Why isn't position:sticky with left:0 working inside a scrollable container?

查看：21
本文介绍了为什么 position:sticky with left:0 在可滚动容器内不工作?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

.container {溢出-x:滚动；}.排 {显示:弹性；宽度:100%；}.物品 {最小宽度:173px；}.sticky {最小宽度:250px；位置:粘性；左:0；背景:红色；}

<div class="row"><div class="itemsticky">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 class="row"><div class="itemsticky">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 class="row"><div class="itemsticky">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 粘在左侧 0 并让其他列滚动到下方..

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

解决方案

添加边框以更好地查看与使用块级元素和width:100%的限制相关的问题(不是你设置的没用的，而是块元素的默认行为)

.container {溢出-x:滚动；}.排 {显示:弹性；边框:1px 实心；}.物品 {最小宽度:173px；}.sticky {最小宽度:250px；位置:粘性；左:0；背景:红色；}

<div class="row"><div class="itemsticky">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 class="row"><div class="itemsticky">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 class="row"><div class="itemsticky">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>

考虑使用 inline-flex 的内联级元素来解决该问题.添加 min-width:100% 以确保在内容很小的情况下至少覆盖 100% 的宽度.

.container {溢出-x:滚动；}.排 {显示:inline-flex；最小宽度:100%；边框:1px 实心；}.物品 {最小宽度:173px；}.sticky {最小宽度:250px；位置:粘性；左:0；背景:红色；}

<div class="row"><div class="itemsticky">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 class="row"><div class="itemsticky">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 class="row"><div class="itemsticky">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>

<小时>

一些相关问题:

左边为零的嵌套粘性元素不粘性

在 css 中使用位置粘性时，为什么我的元素没有粘在左边?

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??

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

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

解决方案

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>

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>

Some related questions:

Nested sticky element with zero left does not sticky

Why is my element not sticking to the left when using position sticky in css?

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆