iOS端禁止滚动超出内容，实现Android同款滚动效果

iOS Safari默认会给滚动容器添加弹性滚动（bounce）效果，当内容滚动到边界后继续滑动，会触发容器的弹性回弹，从而露出容器的背景色；而Android端浏览器通常不会有这个行为。要让iOS端和Android端表现一致，可以通过以下方法解决：

方法一：使用overscroll-behavior: contain（推荐） #

这是最简洁的解决方案，通过CSS属性直接控制滚动边界行为，将滚动限制在容器内部，抑制iOS的弹性bounce效果。

修改后的完整代码：

<div id="container">
    <div id="contents">
    start
    </div>
</div>

#container{
  position:fixed;
  height:100px;
  width:200px;
  background:yellow;
  overflow: hidden;
  overflow-y: scroll;
  border:1px black solid;
  /* 新增属性，限制滚动行为 */
  overscroll-behavior: contain;
}

#contents{
  height:1000px;
  width:200px;
  background:green;
}

属性说明 #

overscroll-behavior: contain 指定滚动到达容器边界时，滚动行为被限制在当前容器内，不会触发父容器或页面的滚动，同时直接抑制iOS特有的弹性回弹效果，让滚动表现和Android端一致。

方法二：兼容旧版iOS（iOS 13及以下） #

如果需要兼容不支持overscroll-behavior的旧版iOS，可以结合-webkit-overflow-scrolling: touch和额外的样式处理，不过这种方式相对繁琐：

#container{
  position:fixed;
  height:100px;
  width:200px;
  background:yellow;
  overflow: hidden;
  overflow-y: scroll;
  border:1px black solid;
  -webkit-overflow-scrolling: touch;
}

#contents{
  height:1000px;
  width:200px;
  background:green;
  /* 确保内容完全填充，避免间隙 */
  margin-bottom: 0;
}

同时可以通过JavaScript监听滚动事件，当滚动到边界时阻止默认行为，但这种方式需要额外的事件处理代码，不如第一种方法高效。

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