无需登录 数据私有 本地保存

scroll-padding/margin 演示 - 锚点定位偏移控制

CSS 演示 CSS scroll-margin scroll-padding 锚点
16
0
0
0
Site Header
scroll-padding-top: 20px
margin: 0px
1 引言区域

这是页面的第一个章节。点击上方导航按钮或调整右侧控制面板，观察 scroll-padding 和 scroll-margin 如何影响锚点定位的偏移。

margin: 0px
2 核心功能介绍

在实际开发中，固定头部（sticky header）经常会遮挡锚点目标。scroll-padding-top 在滚动容器上设置安全区域，而 scroll-margin-top 在目标元素上设置额外偏移。

margin: 0px
3 使用场景对比

scroll-padding 适用于容器级别的统一偏移（如全局固定header）；scroll-margin 适用于元素级别的个性化偏移（如某个需要额外呼吸空间的重要章节）。两者可以叠加使用。

margin: 0px
4 代码示例

在CSS中只需一行：scroll-padding-top: 60px;（容器）或 scroll-margin-top: 30px;（目标元素），即可优雅地解决锚点定位偏移问题，无需JavaScript hack。

margin: 0px
5 浏览器兼容性

Chrome 69+、Firefox 68+、Safari 14.1+、Edge 79+ 均完整支持这两个属性。移动端浏览器也广泛支持，可放心用于生产环境。

总偏移量
20px
scroll-padding-top 20px + scroll-margin-top 0px
偏移控制面板

滚动容器的顶部安全内边距

20px

目标元素的顶部滚动外边距（应用到所有section）

0px
提示：调整滑块后点击上方导航按钮或"测试滚动"查看效果。蓝色虚线区域 = scroll-padding，橙色虚线区域 = scroll-margin。
常见问题
scroll-padding 和 scroll-margin 有什么区别？
scroll-padding 设置在滚动容器上，定义容器内部的"安全区域"，影响容器内所有锚点目标。类似于容器的内边距，但只影响滚动定位。
scroll-margin 设置在目标元素上，定义元素周围的"滚动外边距"，可以针对不同元素设置不同值。最终偏移量 = scroll-padding-top + scroll-margin-top。
什么时候用 scroll-padding，什么时候用 scroll-margin？
如果需要全局统一的偏移（如整个站点有固定header），使用 scroll-padding 在根容器或主滚动容器上设置。
如果特定元素需要额外的呼吸空间（如某个重要章节标题需要更多留白），使用 scroll-margin 在该元素上设置。两者可以结合使用。
这些属性会影响普通滚动吗？
不会。scroll-padding 和 scroll-margin 仅影响编程式滚动定位，包括：锚点导航（URL hash）、element.scrollIntoView()、scroll-snap 对齐等。用户手动滚动时这些属性不产生任何视觉效果。
浏览器兼容性如何？需要polyfill吗？
Chrome 69+、Firefox 68+、Safari 14.1+、Edge 79+ 均原生支持，覆盖了97%+的现代浏览器。移动端iOS Safari 14.5+也完整支持。一般不需要polyfill，可直接用于生产。
可以使用百分比或vh单位吗？
可以。scroll-padding 和 scroll-margin 支持所有CSS长度单位：px、em、rem、%、vh 等。百分比相对于滚动容器的对应维度计算。对于固定header场景，推荐使用 px 或 rem。
如何同时设置四个方向的偏移？
使用简写属性：scroll-padding: top right bottom left;（如 scroll-padding: 60px 0 0 0;）。scroll-margin 同理。在固定header+固定footer的布局中，可以同时设置top和bottom方向。
🔧 相关工具