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），然后，当您水平滚动页面时，粘性属性“ loses”会丢失，因为您滚动的位置比{ {1}}宽度。

一种解决方案是将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;
}

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

1 个答案: