html - 网格元素与位置粘性重叠

Question

我在 Firefox 中的网格容器中遇到粘性元素问题。

我创建了一个网格容器，其中包含 8 个元素，每个元素 100px:

• 第 1 项粘在左侧
• 第 8 项粘在容器的右侧

当我滚动到网格容器的右侧时:

• 在 Chrome (80.0.3987.122) 中一切正常。第 7 项和第 8 项彼此相邻(容器的初始滚动宽度为 800px)
• 但是，在 Firefox(73.0.1(64 位) 中，第 7 项和第 8 项重叠(容器的初始滚动宽度为 700 像素)

有人知道如何在 Firefox 中解决这个问题吗？

请参阅随附的代码片段。

谢谢!

setTimeout(() => {
  console.log('container width', document.querySelector('#container-grid').scrollWidth + 'px');
}, 100)

#container-grid {
  width: 500px;
  background: silver;
  height: 100px;
  overflow-x: scroll;
}

.items {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
}

.sticky-left {
  position: sticky;
  left: 0;
}


.sticky-right {
  position: sticky;
  right: 0;
}

<div id="container-grid">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item sticky-left">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item ">item 6</div>
    <div class="item ">item 7</div>
    <div class="item sticky-right">item 8</div>
  </div>
</div>

Answer 1

添加一个宽度非常小的额外元素似乎可以避免 Firefox 上的错误

setTimeout(() => {
  console.log('container width', document.querySelector('#container-grid').scrollWidth + 'px');
}, 100)

#container-grid {
  width: 500px;
  background: silver;
  height: 100px;
  overflow-x: scroll;
}

.items {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 0.3px;
}
.items::after {
  content:"";
}

.sticky-left {
  position: sticky;
  left: 0;
}


.sticky-right {
  position: sticky;
  right: 0;
}

<div id="container-grid">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item sticky-left">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item ">item 6</div>
    <div class="item ">item 7</div>
    <div class="item sticky-right">item 8</div>
  </div>
</div>