如何让相对定位div延伸至macOS/iOS弹性滚动的overscroll区域

要实现垂直居中容器可左右无限延伸并支持macOS/iOS弹性滚动的效果，只需修改CSS如下：

html, body {
  height: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  background-color: lavender;
}

#container {
  background-color: thistle;
  height: 601px;
  position: relative;
  min-width: 100%;
  background-size: 20px 20px;
  background-image: linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.img-wrapper {
  width: 300px;
  position: absolute;
}

.img-wrapper img {
  width: 100%;
}

关键修改说明 #

1. 垂直居中方案替换：
   放弃原有的margin-top: calc(50vh - 300px)，改用html, body的flex布局+align-items: center实现容器垂直居中，确保横向滚动时容器始终保持在视口垂直中间位置。

2. 横向滚动与弹性效果支持：

   • 给html, body设置overflow-x: auto，开启横向滚动能力，系统会自动处理macOS/iOS的弹性overscroll效果。
   • 加上overflow-y: hidden禁用垂直方向滚动，避免不必要的滚动干扰。

3. 容器宽度自适应：
   给#container设置min-width: 100%，保证容器至少铺满当前视口宽度；内部绝对定位的元素通过left属性设置偏移时，会自动撑开横向滚动区域，实现“无限延伸”的效果。

内容的提问来源于stack exchange，提问作者jatx50