滚动行为属性

最后更新：2026-09-13

scroll-behavior 滚动行为属性

scroll-behavior 用于控制滚动容器内的滚动跳转是瞬时完成还是平滑过渡。当设置为 smooth 时，点击锚点链接或使用 JavaScript 滚动时，页面会平滑地滚动到目标位置，而不是瞬间跳转，能显著提升用户体验。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

scroll-behavior: auto | smooth;

⚙️ 取值

值	类型	描述
`auto \| smooth`	关键字	滚动行为

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
scroll-behavior	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： 通常将 scroll-behavior: smooth 设置在 html 或根滚动容器上，全局生效。

注意： 平滑滚动会尊重用户的 prefers-reduced-motion 无障碍设置；如果用户开启了「减少动画」，浏览器会自动忽略 smooth 值。

❓ 常见问题

Qscroll-behavior 对 window.scrollTo() 有效吗？

A有效。只要滚动容器设置了 scroll-behavior: smooth，window.scrollTo、scrollBy、scrollIntoView 的默认行为就是平滑滚动，也可在 JS 里显式传 { behavior: 'smooth' } 覆盖。注意锚点跳转发生在最近的滚动容器上。

Q为什么设置了 smooth 但没有效果？

A排查顺序：属性是否设置在真正滚动的容器上（页面级滚动是 html，内部滚动是 overflow 元素）；是否被系统的 prefers-reduced-motion: reduce 覆盖（减少动画设置会强制忽略平滑）；是否有 JS 以 behavior: 'auto' 覆盖了默认行为。

Qscroll-behavior: smooth 会影响性能吗？

A平滑滚动由浏览器原生实现，滚动在合成器线程完成，不阻塞主线程，性能开销很小。但滚动过程中如果触发了大量重排或重绘（如懒加载图片、监听 scroll 改样式），仍可能卡顿。建议避免在 scroll 事件中做昂贵操作，或用 passive 监听优化。

Qscroll-behavior 和 JS 实现的平滑滚动有什么区别？

Ascroll-behavior: smooth 由浏览器原生驱动，无需 JS、性能好、自动尊重 prefers-reduced-motion 设置；JS（如 requestAnimationFrame 手动滚动）可控性更强，能实现自定义缓动、滚动到指定偏移等，但代码量更大。能用 CSS 解决的场景优先用 CSS。