版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/90903836
css平滑滚动
scroll-behavior: smooth;
支持性:不好,谷歌火狐支持;其他多数不支持
js滚动
window.scrollTo(0,0) // 1. 回到顶部,不够友好
Element.scrollIntoView() // 2. 让当前元素滚动到浏览器可视化区域内
举一个在react中应用的例子:ref+scrollIntoView
<div ref={(node)=>this.node = node}></div>
this.node.scrollIntoView({
block: "start",
inline: "nearest",
behavior: "smooth" // 平滑滚动
});
支持性:还可以,对于无参数的滚动支持还是挺好的。
向下兼容
如果页面不支持scrollIntoView,就是用js做缓冲效果 (requestAnimationFrame + 缓冲算法)
学习地址:https://segmentfault.com/a/1190000016839122?_ea=5019384