首页 > 技术文章 > 关于scroll滚动式的过渡动画

shiazhen 2020-05-22 15:38 原文

解释

现代浏览器陆续意识到了这种需求,scrollIntoView意思是滚动到可视,css中提供了scroll-behavior属性,js有Element.scrollIntoView()方法。

scroll-behavior

scroll-behavior属性可取值auto|smooth|inherit|unset

scroll-behavior: smooth;是我们想要的缓冲效果。在PC浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑“回到顶部”,只需在这两个标签上都加上:

html,body{

scroll-behavior:smooth;

}

准确的说,写在容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑,而不局限于,标签。

利用这个css属性可以一步将原来纯css标签直接切换,变成平滑过渡切换效果。

资料

推荐阅读