移动端浏览器（尤其是 iOS Safari）的橡皮筋回弹效果（Overscroll / Bounce Effect）

问题如下：在移动端浏览器,IOS测试的，

 

原因解释

当你在页面顶部继续向下滑动时，浏览器默认允许整个页面被整体拖动，就像拉橡皮筋一样。这时候：

1. 页面内容整体下移
2. 露出了浏览器视口背后的背景色（通常是白色或浅灰色）
3. 看起来就是左上角（或整个顶部）出现了一块空白

这不是你的 div 本身有空白，而是整个页面被拉下来了。 

见触发场景

表格

场景	说明
页面内容很短	内容没撑满一屏，滑动时更容易触发整体拖动
没有阻止默认行为	浏览器默认开启了 overscroll
html/body 有默认边距	部分浏览器自带 margin: 8px
使用了 -webkit-overflow-scrolling: touch	在可滚动容器内滑动时可能连带拖动页面

解决方案

方案 1：阻止页面整体回弹（推荐）

html, body {
  margin: 0;
  padding: 0;
  /* 禁止 overscroll 回弹 */
  overscroll-behavior: none;
  /* 防止 iOS 橡皮筋效果 */
  -webkit-overflow-scrolling: auto;
}

方案 2：让内容始终撑满屏幕

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 禁止页面级滚动 */
}

/* 把滚动限制在内容容器内 */
.page-container {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

方案 3：针对 iOS 的终极处理（用 JS 阻止顶部/底部回弹）

document.body.addEventListener('touchmove', function(e) {
  // 如果已经在顶部还继续下拉，阻止默认行为
  if (document.scrollingElement.scrollTop <= 0) {
    e.preventDefault();
  }
}, { passive: false });

方案 4：简单修复（检查默认边距）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

一句话总结

滑动时左上角的空白，不是 div 的问题，而是浏览器把整个页面往下拉露出了背景。用 overscroll-behavior: none 或把滚动限制在内部容器即可解决。

截图里是一个表格页面，如果内容没撑满屏幕，最容易触发这个现象。建议用方案 2（内容容器独立滚动）来处理，体验最自然。