HTML scroll-behavior原生平滑滚动方法

• id 的值必须与 href 中 # 后面的内容完全一致。
• 区分大小写。
• 不能包含空格。
• 不能使用 URL 编码字符（例如空格用 %20 表示是不行的）。
• 只认 id 属性，不支持旧的 name 属性。

在动态渲染的页面（如使用 React、Vue）中，需要特别注意：确保目标元素的 id 在组件挂载完成后已经真实存在于 DOM 中。否则，点击跳转可能会静默失败，或者直接回退到页面顶部。

还有一些样式因素会导致滚动异常：

• 如果目标元素被 display: none、visibility: hidden 或 opacity: 0 隐藏，滚动行为可能会定位错误或者完全没有反应。
• 当目标元素的父级容器设置了 overflow: hidden 或某些 transform 属性时，可能会截断或创建新的滚动上下文，导致滚动“冲过头”或者停在半路。遇到这种情况，更稳妥的做法是直接使用 JavaScript 的 scrollIntoView() 方法。

兼容性差怎么办？别硬扛，用 JS 检测 + fallback

该属性的浏览器兼容性是一个现实问题。Internet Explorer 全系列都不支持；iOS 上的 Safari 在 15.4 版本之前也无效；部分安卓系统的 WebView 则会自动降级为普通的瞬时跳转。不能指望所有用户都升级浏览器，因此主动检测并提供降级方案是必要的。

一个基本的检测和降级思路如下：

if ('scrollBehavior' in document.documentElement.style === false) {
  // 引入 polyfill 或手动实现
  import('smoothscroll-polyfill').then(polyfill => polyfill.polyfill());
}

• 更轻量级的做法是，仅在不支持该属性的环境中，通过 JavaScript 接管所有 href 以 # 开头的链接的点击事件，然后调用 element.scrollIntoView({ behavior: 'smooth' }) 来实现平滑滚动。
• 需要留意一个系统级设定：如果用户在操作系统（如 macOS 或 Windows）中开启了“减少动画”或类似的辅助功能偏好，那么浏览器会强制禁用所有的 scroll-behavior: smooth 效果。这是浏览器的合规行为，并非代码 bug。
• 最后要提醒的是，使用 Polyfill 模拟的平滑滚动，其手感和性能通常无法与原生滚动媲美，在复杂页面中可能会给主线程带来明显压力。

自定义滚动容器也要单独设 scroll-behavior: smooth

如果页面中存在局部的可滚动区域，比如一个设置了 overflow: auto 的 div，那么设置在 html 上的 scroll-behavior 对它完全不起作用。必须为这个自定义的滚动容器单独设置该属性：

.custom-scroll { scroll-behavior: smooth; overflow-y: auto; }

• 当然，该容器本身必须满足可滚动的条件：内容高度大于容器高度，并且 overflow 属性值不能是 visible。
• scroll-behavior 仅作用于浏览器真实的滚动上下文。对于那些通过 transform 变换或 position: fixed 定位来模拟滚动效果的技术方案，它是无能为力的。
• 在移动端开发中需谨慎使用 -webkit-overflow-scrolling: touch 属性。在 iOS 12 到 14 的某些版本中，它与平滑滚动结合可能会导致弹性回弹失效、滚动减速过快甚至直接卡住的问题。

在实际项目中，一个最容易被忽略的检查点是：滚动目标元素是否还处于标准的文档流中。一旦目标元素被 position: absolute 绝对定位、受到 transform 影响，或者被嵌套在一个设置了 overflow: hidden 的容器里，scroll-behavior 就很可能失效。遇到这种情况，与其反复调整样式，不如直接换用 scrollIntoView() 方法，往往更省时省力。