显示有误

博客园 首页 新随笔 联系 订阅 管理

平滑滚动:平滑滚动是我们做页面交互时经常用到的一种动画效果,今天要讲的骚操作就是通过HTML5中提供的属性scroll-behavior

scroll-behavior

这个css属性有两个自定义值:auto | smooth,默认值为auto,表示立即滚动到指定位置,smooth即表示平滑滚动

这个属性会影响滚动函数 scrollToscrollIntoView 等的默认滚动行为,也会影响 scrollTopscrollLeft 等 DOM 属性改变时的滚动行为。如果 scroll-behavior 被设置在根元素(<html>)上,表示应用在视口(viewport)上。这时对锚点、内链触发的视口滚动同样有效。

所以可以给 html 元素设置样式 scroll-behavior: smooth 即可实现平滑滚动

或者通过js的方法实现:动态平滑的滚动到指定位置,下面是本人在项目中使用的方法

 

 

 scrollIntoView

这个函数的功能就是把某个元素滚动到窗口的可见区域,它接受两种形式的值:布尔值或对象(三个参数的对象:behavior,block,inline)

  布尔值:scrollIntoView(true|false) true表示平滑滚动到可视区域

 对象:scrollIntoView({

     behavior: "auto" | "instant" | "smooth", // 默认 auto

     block: "start" | "center" | "end" | "nearest", // 默认 center

     inline: "start" | "center" | "end" | "nearest", // 默认 nearest

               })

posted on 2020-04-29 11:24  显示有误  阅读(488)  评论(0编辑  收藏  举报