移动端下拉时出现橡皮筋效果怎么阻止？

夏侯会静提问于 2026-02-26 15:29:17 阅读 66

优化

我在做移动端页面，当用户在顶部下拉或者底部上拉时，整个页面会出现那种“橡皮筋”回弹的效果，特别影响体验。我试过给 body 加 overflow: hidden，但没用，滚动还是能触发。

也查了资料说要用 touchmove 事件 preventDefault，但加了之后页面就完全不能滚动了。有没有办法只禁掉边界处的橡皮筋，又保留正常滚动？

移动端优化

我来解答赞 6 收藏

反馈

1 条解答

极客梓艺 Lv1

这个问题我踩过坑，也调试过好几次，橡皮筋效果其实是移动端浏览器（特别是 iOS Safari）的默认行为，跟 overflow 其实没关系，body 设置 hidden 只是禁了内容滚动，但不会阻止浏览器自身的弹性回弹。

关键点在于：要阻止的是 body 元素的滚动（不是内容滚动），但又要保留内部可滚动容器的正常滚动——这时候用全局的 touchmove preventDefault 肯定不行，一加整个页面就死掉了。

正确做法是：在滚动容器滚动到边界时才阻止默认行为，其他时候放行。核心思路是监听 touchmove，判断当前是否处于滚动边界，再决定要不要 preventDefault。

下面是一个通用的方案，适用于你页面里某个可滚动容器（比如

）：

const scrollContainer = document.querySelector('.scroll-container');

let startY = 0;



scrollContainer.addEventListener('touchstart', (e) => {

  startY = e.touches[0].clientY;

}, { passive: true });



scrollContainer.addEventListener('touchmove', (e) => {

  const currentY = e.touches[0].clientY;

  const deltaY = currentY - startY;

  const scrollTop = scrollContainer.scrollTop;

  const scrollHeight = scrollContainer.scrollHeight;

  const clientHeight = scrollContainer.clientHeight;



  // 到顶部且继续下拉，或到底部且继续上拉时，阻止默认行为

  if ((scrollTop <= 0 && deltaY > 0) || (scrollTop + clientHeight >= scrollHeight && deltaY < 0)) {

    e.preventDefault();

  }

}, { passive: false });

注意几个点：
- touchstart 用 passive: true（提升滚动性能）
- touchmove 里必须用 passive: false 才能调 preventDefault
- 判断边界时别忘了 scrollHeight 和 clientHeight 的比较要带容差（有些设备可能有小数偏移）

如果你页面是整个 body 都能滚动（没有独立容器），那就只能在 body 上监听，但得确保 body 不是 overflow: hidden，而是允许滚动，只是边界时拦截。不过这种情况现在比较少见了，推荐把滚动限制在一个固定高度的容器里，体验更好也更好控制。

顺便说一句，iOS 13+ 其实支持 CSS 属性 overscroll-behavior: none，但兼容性还是不够稳妥，线上项目我一般还是用 JS 方案兜底。

2026-02-26 16:01