如何阻止React Tailwind页面出现Overscroll Bounce（滚动回弹）？

你遇到的问题是因为仅给容器元素添加overscroll-none无法覆盖浏览器根元素（html/body）的默认弹性滚动行为，尤其是移动端浏览器（如Safari）的原生回弹特性会触发顶部白色条带。以下是具体解决方法：

1. 全局禁用根元素的弹性滚动 #

在项目的全局样式文件（如src/index.css）中添加以下代码，直接覆盖html和body的滚动行为：

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  overscroll-behavior: none;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

• overscroll-behavior: none：彻底禁用弹性滚动效果
• overflow: hidden：避免根元素出现滚动条（如果你的页面不需要全局滚动）
• 清除默认margin/padding：防止容器高度计算偏差

2. 若需内部滚动的适配方案 #

如果你的页面需要某个容器内部可滚动，不要给body设置overflow: hidden，而是调整容器样式：

export default function Home() {
  return (
    <div className="bg-gray-900 h-screen overscroll-none overflow-auto">
      <main className="text-white">
        <h2>Title</h2>
        <p>body</p>
        {/* 添加足够多内容时，容器会内部滚动且无全局回弹 */}
      </main>
    </div>
  )
}

对应的全局样式改为：

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

3. Safari浏览器额外适配（可选） #

如果在Safari中仍有问题，可添加webkit前缀的属性优化：

html {
  -webkit-overflow-scrolling: touch;
}

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