设置平滑滚动和滚动边距,点击下方锚点按钮体验效果。
点击按钮平滑滚动到对应位置。
平滑滚动使页面切换更自然。scroll-padding 控制滚动容器的内边距。
scroll-behavior: smooth 为所有锚点滚动添加过渡动画。
scroll-margin 可以给单个元素设置额外的滚动偏移量,适合需要避开固定导航栏的场景。
scroll-behavior 控制元素滚动时的过渡动画。设置为 smooth 后,所有内部锚点跳转和 scrollIntoView() 调用都会带有平滑动画。
scroll-padding — 定义滚动容器的内边距,让目标元素不会紧贴容器边缘scroll-margin — 定义单个元素的外边距,用于锚点定位时的额外偏移scroll-snap-type / scroll-snap-align — 滚动捕捉,做轮播/分页效果