Tailwind暗色模式滚动回弹区域深色背景未铺满问题解决

Chrome、Firefox、Brave等Chromium、Gecko内核浏览器，滚动到页面边界触发橡皮筋回弹效果时，露出的过界区域会直接渲染根元素<html>的背景色，不会继承内部普通容器的背景样式。
当前实现把暗色背景样式绑定在了高度为h-screen的内部div容器上，这个容器的最大渲染高度仅等于视口高度，过界区域不在该容器的渲染范围内；同时项目未给<html>根元素设置对应暗色背景，浏览器默认根元素背景为白色，就会出现过界区域露白的问题。
Safari对过界区域做了特殊渲染适配，会自动把页面顶层内容容器的背景延伸到过界区域，因此不会出现该问题。Tailwind官网、Stack Overflow均采用根元素绑定暗色背景的方案，因此过界区域可以正常覆盖暗色样式。

按以下步骤调整即可实现全区域暗色模式覆盖：

• 调整全页容器的高度设置：把原容器上的h-screen替换为min-h-screen，避免容器被固定死为视口高度，让容器可以随页面内容自然撑开，背景色跟随内容流覆盖整个滚动范围。
• 给根元素添加暗色背景兜底（核心修复步骤），两种实现方式二选一即可：
  • 方式一（Tailwind推荐写法）：将暗色模式的dark类、对应背景色直接绑定到<html>根元素上，让浏览器渲染过界区域时直接读取根元素的暗色背景。如果是手动切换暗色模式的场景，切换逻辑直接操作html标签的class即可。
  • 方式二：在全局CSS文件中给html、body标签设置和暗色模式匹配的背景色，示例代码：

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    html, body {
      min-height: 100%;
    }
    .dark html, .dark body {
      background-color: #000;
    }
    

• 调整后的_app.tsx核心代码参考：

  <Store state={state} dispatch={dispatch}>
    <Head>
      <meta charSet="UTF-8" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
      />
    </Head>
    <div className="min-h-screen dark dark:bg-black dark:text-white overscroll-auto lg:overscroll-contain">
      <Component {...pageProps} id="app" />
    </div>
  </Store>
  

调整完成后，滚动过界的回弹区域会直接读取根元素的暗色背景，不会再露出默认白色。

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