如果网格的宽度大于其父级的 100%，则具有粘性左列的 CSS 网格将滚动

Question

我有一个带有粘性左右列的 CSS 网格，如下所示：

.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
}

.grid > div {
  border: 1px solid black;
  background-color: white;
}

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

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

<div class="grid">
  <div class="sticky-left">Sticky Left</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div class="sticky-right">Sticky right</div>
</div>

右列按预期工作：始终显示在右侧。

然而，左列的行为很奇怪：它会在大约 50% 网格宽度后向左滚动，这不是预期的结果。如果我想让左栏粘在左侧而不是滚动，该怎么办？

Answer 1

该.grid元素没有拉伸body宽度。宽度body默认设置为display:block并获取视口的宽度（例如：645px），然后当您水平滚动页面时，粘性属性“丢失”，因为您滚动的距离超过了宽度body。

一种解决方案是将您的bodyas设置为inline-block，然后其宽度将跟随其内容宽度。

body {
  display: inline-block;
}

.grid或者您可以只设置元素的宽度

.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
  width: 2000px;
}

body {
  display: inline-block;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
  width: 2000px;
}