使用 CSS 将视口滚动限制到部分内容

Question

我喜欢有一行元素（例如内联块，可能在弹性容器中），它们可以溢出视口。然而，第一个和最后一个是虚拟的，被视为非内容，仅部分出现在视口边缘。

假设我们有：

#container {
  display: flex;
}

#container div {
  margin: 100px;
  min-width: 500px;
  min-height: 500px;
  background: grey;
}

#container div.dummy {
  background: pink;
}

<div id="container">
  <div class="dummy">Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div class="dummy">Element 5</div>
</div>

如何将滚动限制在较小的区域，例如。例如，从每一侧裁剪 500px，让容器溢出视口，但无法滚动到那里？这可以通过简单干净的 CSS 实现吗？

Answer 1

您可以使用负边距与网格（或附加包装器）相结合来修剪两侧。

为了更好的演示，我限制了

300px

而不是

500px

。

#container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, 1fr);
  width: fit-content;
  overflow: hidden;
}

#container div {
  margin: 100px;
  min-width: 500px;
  min-height: 500px;
  background: grey;
}

#container div.dummy:first-child {
  background: pink;
  margin-left: -300px;
}

#container div.dummy:last-child {
  background: pink;
  margin-right: -300px;
}

<div id="container">
  <div class="dummy">Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div class="dummy">Element 5</div>
</div>