免费在线CSS平滑滚动生成器，可视化调整scroll-behavior、scroll-padding和scroll-margin参数，实时体验平滑锚点滚动效果。一键复制CSS代码。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⚙️ 滚动行为设置
设置平滑滚动和滚动边距，点击下方锚点按钮体验效果。
20px
40px
👁️ 实时预览
点击按钮平滑滚动到对应位置。
📍 区块 1
平滑滚动使页面切换更自然。scroll-padding 控制滚动容器的内边距。
📍 区块 2
scroll-behavior: smooth 为所有锚点滚动添加过渡动画。
📍 区块 3
scroll-margin 可以给单个元素设置额外的滚动偏移量，适合需要避开固定导航栏的场景。
💻 CSS代码
📖 CSS scroll-behavior 详解
scroll-behavior 控制元素滚动时的过渡动画。设置为 smooth 后，所有内部锚点跳转和 scrollIntoView() 调用都会带有平滑动画。
配合属性
scroll-padding— 定义滚动容器的内边距，让目标元素不会紧贴容器边缘scroll-margin— 定义单个元素的外边距，用于锚点定位时的额外偏移scroll-snap-type/scroll-snap-align— 滚动捕捉，做轮播/分页效果
常见问题
scroll-behavior: smooth 有什么用？
让所有锚点跳转和 scrollIntoView 调用带有平滑过渡动画，页面切换更自然。
scroll-padding 和 scroll-margin 有什么区别？
scroll-padding 设置滚动容器的内边距偏移，scroll-margin 设置单个元素的外边距偏移，常用于避开固定导航栏。
浏览器兼容性如何？
scroll-behavior、scroll-padding、scroll-margin 均获得所有现代浏览器（Chrome、Firefox、Safari、Edge）广泛支持。