这篇文章上次修改于 1382 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
新版的浏览器已经支持原生的页面「平滑滚动」了,你可能不再需要任何 JS 库去实现它了。目前只有 Safari 浏览器是不支持它的,强烈谴责!谴责!
- 支持直接通过锚链接使用
- 支持根据元素或指定坐标进行使用
CSS
这么好的技术,怎么食用呢?最简单的实现方式,就是给 CSS 增加一条 scroll-behavior
属性。把它放在你的页面根元素,所有子元素都会继承这个设置。
:root{
scroll-behavior: smooth;
}
之后,你的任何锚链接都可以平滑过渡滚动到它的位置。
<a href="#section-1">章节 1</a>
滚动差值
等等!锚链接确实可以滚动到这个元素,但是它被网页顶上的菜单栏挡住了!这该怎么办呢?scroll-margin-top
属性,我称为“滚动差值”,就可以彻底解决这个问题。
PS:此处的选择器需要根据页面设计实际情况编写
selector {
scroll-margin-top: 7em; /* 留出顶部导航的空间 */
}
完美解决!
JS
在某些情况下依旧需要使用 JS 进行滚动?姜还是老得辣。虽然使用的还是老方法,但是这样就不用重新记忆了,不是吗?
// 滚动到页面 1000 像素的位置,并平滑过渡
window.scrollTo({
top: 1000,
behavior: "smooth"
});
如果你已经编写了前面的“全局” CSS 属性,那么直接上旧版写法也是可以的。
// X 坐标,Y 坐标
window.scrollTo(0, 1000);
兼容性
什么,你觉得它兼容性不好?那就不好意思了,除了 IE 和 Safari,现在都基本上支持了,移动设备就更不用说了!
平滑滚动在 Safari 上确实不行,但是滚动差值还是支持的噢!
你的网站还在使用 JS 进行平滑过渡吗?你对于这项新技术怎么看?欢迎参与留言评论~
已有 6 条评论
当年类似的平滑滚动库我都用过,然后被几个 mac 用户吐槽过
后来我有了自己的 MacBook Pro,才开始明白这种库有多么反人类。。
所幸的是这个需求最终得到了各大主流浏览器的支持,这也是可喜可贺的
@tcdw 对的,在 Mac 上滚动很多 Bug,可能写那些库的人都是用 Windows / Linux 的吧,哈哈哈
html 设置这个 scroll-margin 确实起效了。但是 scroll-margin-top 没有效果,这个是咋回事... 蛋疼
滚动差值 scroll-margin-top 还是第一次看到,学到了。
这种出来了有一段时间的新特性一般都能在 GitHub 上找到对应的 polyfill(https://github.com/iamdustan/smoothscroll),这样就不用太担心兼容性的问题了 qwq
@Eltrac 我自己就在用 MacOS,但却很少用 Safari,这货用新特性真的会出现很多小毛病...
只是没有平滑的话,我个人觉得还是没多大影响,毕竟引用的多,站就变得臃肿了...