如何用CSS将视口（viewport）滚动限制到内容的特定区域

嘿，我完全get到你的需求了——你有个flex容器，里面首尾是两个粉色的占位dummy元素，中间是正经内容，现在滚动的时候会把dummy整个都滚出来，你想限制滚动范围，让这俩dummy只在视口边缘露一小截（比如你提到的50px），中间的内容能正常滚动，对吧？

我给你个简单又靠谱的实现方案，用padding + 负margin的组合就能搞定，直接修改你的CSS代码就行：

#container {
  display: flex;
  overflow-x: auto; /* 开启横向滚动 */
  padding-left: 50px; /* 左边保留50px的dummy可见区域 */
  padding-right: 50px; /* 右边保留50px的dummy可见区域 */
}

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

#container div.dummy {
  background: pink;
}

/* 给首尾dummy设置负margin，让它们延伸到容器的padding区域 */
#container div.dummy:first-child {
  margin-left: -50px;
}

#container div.dummy:last-child {
  margin-right: -50px;
}

原理说明： #

• 容器的padding-left/right直接定义了滚动时允许dummy露出的宽度，你可以根据需求调整这个数值；
• 首尾dummy的负margin会让它们超出容器的内容框，延伸到padding区域里，这样就能在视口边缘显示一部分；
• 容器的overflow-x: auto会根据内容宽度生成滚动条，但因为padding的存在，滚动的起点和终点会被限制，不会让dummy完全显示出来。

如果想要滚动体验更丝滑，比如滚动到每个真实内容元素时自动对齐，还可以加上滚动吸附的属性，给容器再添两行代码：

#container {
  scroll-snap-type: x mandatory; /* 开启横向强制吸附 */
}

#container div:not(.dummy) {
  scroll-snap-align: center; /* 每个真实元素滚动时居中对齐 */
}

你的HTML结构完全不需要修改，还是原来的就行：

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

备注：内容来源于stack exchange，提问作者dronus