关于scroll滚动式的过渡动画

解释

现代浏览器陆续意识到了这种需求,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标签直接切换,变成平滑过渡切换效果。

资料

原文地址:https://www.cnblogs.com/shiazhen/p/12937509.html