位置：滚动一定量后粘性不起作用

Question

我正在尝试创建一个布局，其中 a 中的第一列和最后一列div是粘性的。当我滚动一定数量时，最左边的列超出了左侧限制。为什么会发生这种情况以及如何解决它？

当您滚动到最右侧时，您可以看到红色列跳出框。

示例代码笔：https://codepen.io/vighnesh-google/pen/WNzjvqN

示例代码：

.slider {
  width: 100%;
  position: relative;
  overflow: auto;
}

.header,
.body {
 display: flex;
}

.item {
  width: 20%;
  height: 100px;
  background: yellow;
  border: 1px solid black;
  
  flex-grow: 0;
  flex-shrink: 0;
}

.sticky-item-left {
  position: sticky;
  left: 0;  
  background: red;
}

.sticky-item-right {
  position: sticky;
  right: 0;
  background: green;
}

<div class="slider">
  <div class="header">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
  <div class="body">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
</div>

Answer 1

解决这个问题的一种方法是：

.slider {
  overflow: auto;
  display: grid; /* main element as grid */
  grid-auto-columns: 20%;  /* width of the items */
}
.header,
.body {
   display: contents; /* remove the parent boundary to make sticky works */
}
.header > * {
  grid-row: 1; /* all header elements in first row */
}
.body > * {
  grid-row: 2; /* all body elements in second row */
}
.item {
  height: 100px;
  background: yellow;
  border: 1px solid black;
}

.sticky-item-left {
  position: sticky;
  left: 0;  
  background: red;
}

.sticky-item-right {
  position: sticky;
  right: 0;
  background: green;
}

<div class="slider">
  <div class="header">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
  <div class="body">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
</div>

要了解初始代码的问题，请向父元素添加边框以查看粘性元素的限制：

.slider {
  width: 100%;
  position: relative;
  overflow: auto;
}

.header,
.body {
 display: flex;
 border:4px solid blue;
}

.item {
  width: 20%;
  height: 100px;
  background: yellow;
  border: 1px solid black;
  
  flex-grow: 0;
  flex-shrink: 0;
}

.sticky-item-left {
  position: sticky;
  left: 0;  
  background: red;
}

.sticky-item-right {
  position: sticky;
  right: 0;
  background: green;
}

<div class="slider">
  <div class="header">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
  <div class="body">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
</div>