MacOS下Firefox/Safari平滑滚动时HTML背景闪烁问题求助

问题场景 #

• 页面包含带href=#id-*的锚点列表
• 超长页面，对应锚点的id分布在页面不同位置
• 已设置html { scroll-behavior: smooth; }
• 文档结构：

<html style="background:#000">
  <body>
    <nav style="background:#000"></nav>
    <main style="background:#FFF"></main>
    <footer style="background:#000"></footer>
  </body>
</html>

点击锚点时，MacOS的Firefox和Safari会出现html元素黑色背景的闪烁，且不能修改html的背景色。

解决方案 #

方案1：让body背景与html保持一致，避免露出底层背景 #

给body设置与html相同的背景色，并确保body高度始终覆盖视口，滚动过程中即使内容移位，也不会露出html的背景：

html {
  scroll-behavior: smooth;
  background: #000;
}

body {
  background: #000; /* 和html背景一致 */
  min-height: 100vh; /* 确保body至少占满视口高度 */
  margin: 0; /* 清除默认margin，避免出现空白边 */
}

main {
  background: #FFF;
  /* 保留原有的main样式 */
}

方案2：将平滑滚动应用到body而非html #

部分浏览器对html元素的scroll-behavior处理存在兼容性问题，将滚动容器换成body可规避背景闪烁：

html {
  background: #000;
  overflow: hidden; /* 禁止html层面的滚动 */
}

body {
  scroll-behavior: smooth;
  background: #000;
  height: 100vh;
  overflow-y: auto; /* 让body处理垂直滚动 */
  margin: 0;
}

main {
  background: #FFF;
}

方案3：用JS实现自定义平滑滚动（替代原生scroll-behavior） #

如果CSS方案无效，可通过JS手动控制滚动逻辑，完全避免浏览器原生滚动的渲染问题：

// 给所有锚点绑定点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转
    
    const targetId = this.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      // 计算目标元素的滚动位置
      const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY;
      
      // 执行平滑滚动
      window.scrollTo({
        top: offsetTop,
        behavior: 'smooth'
      });
    }
  });
});

同时移除html的原生平滑滚动设置：

html {
  background: #000;
  /* 移除scroll-behavior: smooth */
}

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