html - 如果网格的宽度大于其父级的 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 元素没有拉伸(stretch) body 宽度。 body 宽度默认设置为 display:block 并获取视口(viewport)的宽度(例如:645px)，然后当您水平滚动页面时，粘性属性“丢失” ' 因为你滚动的宽度超过了 body 的宽度。

一个解决方案是将您的 body 设置为 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);
}

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