html - 网格项与粘性位置重叠

Question

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

我创建了一个网格容器，其中包含 8 个 100px 的项目：

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

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

• 在Chrome (80.0.3987.122)一切都很好。项目 7 和 8 彼此相邻（容器的初始滚动宽度为 800 像素）
• 然而Firefox (73.0.1 (64-bit)，第 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>

标签： htmlcssfirefoxcss-gridsticky

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>