移动端怎么阻止橡皮筋效果导致页面抖动？

UP主～晓萌提问于 2026-03-11 19:35:22 阅读 14

优化

我在做移动端H5页面时，发现当用户在顶部下拉或底部上拉时会出现橡皮筋效果（就是那种回弹的滚动），特别是在iOS Safari上特别明显。这会导致整个页面被拖拽变形，体验很差。

我试过给 body 加 overflow: hidden，也试过监听 touchmove 阻止默认行为，但要么完全不能滚动，要么在某些区域失效。下面是我用 Vue 写的一个简单结构，滚动容器是固定高度的：

<template>
  <div class="page">
    <div class="scroll-container" ref="scroller">
      <div v-for="item in list" :key="item.id">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
// ...逻辑略
</script>

有没有办法只禁用橡皮筋效果，但保留内部容器的正常滚动？真的搞了好几天了还是不行……

橡皮筋效果移动端优化

我来解答赞 1 收藏

反馈

1 条解答

思晨的笔记 Lv1

这个问题在iOS Safari上确实很常见，本质上是系统原生的overscroll行为在作妖。

核心解决方案是给滚动容器加CSS：

.scroll-container {

  -webkit-overflow-scrolling: touch;

  overflow-y: auto;

  overscroll-behavior: none;

}

overscroll-behavior: none 这个属性可以禁用元素及其祖先的橡皮筋连锁反应。不过要注意，这个属性在某些旧版iOS上可能不生效。

如果CSS方案在某些iOS版本上失效（你懂的，苹果的兼容性总是那么感人），可以配合JS一起使用：

const scroller = this.$refs.scroller;

scroller.addEventListener('touchmove', function(e) {

  // 判断是否滚动到了边界

  const canScrollDown = scroller.scrollTop > 0;

  const canScrollUp = scroller.scrollTop + scroller.clientHeight < scroller.scrollHeight;

  

  // 如果已经滚到顶部还往下拉，或者滚到底部还往上拉，就阻止默认行为

  if (!canScrollDown && e.touches[0].clientY > window.touchStartY) {

    e.preventDefault();

  }

  if (!canScrollUp && e.touches[0].clientY < window.touchStartY) {

    e.preventDefault();

  }

}, { passive: false });



scroller.addEventListener('touchstart', function(e) {

  window.touchStartY = e.touches[0].clientY;

}, { passive: true });

另外提醒一下，别忘了在index.html的meta里加 viewport-fit=cover，这个有时候也会影响滚动行为。

如果你的页面本身不需要整体滚动，最好把body的overflow也锁死，这样能从根源上减少问题。

2026-03-11 20:02