当前位置: 首页 > Web前端 > HTML5

滚动条平滑滚动到指定位置

时间:2023-04-04 23:51:20 HTML5

背景最近项目需要实现同页面导航跳转。一开始想着画点定位,但是跳跃效果不好,没有过渡动画。后来又尝试了scrollIntoView和scroll-behavior:smooth。一方面是浏览器兼容性不好,另一方面是转场时间无法控制,内容多时跳转太慢。于是自己封装了一个跳转函数,支持三种跳转方式:立即跳转、线性过渡、先快后慢(slow)。本模块采用原生JS编写,不依赖其他插件库。详细见演示:https://theoxiong.github.io/s...安装方法$npminstallscroll-ease-efficient使用//支持CommonJs/ES6/Script三种导入//1.CommonJsconst{scrollTo}=require('scroll-ease-efficient')//2.ES6import{scrollTo}from'scroll-ease-efficient'//3.Script//可滚动元素scrollEle=document.getElementById('id')//基本用法scrollTo(scrollEle,500)//指定过渡时间(以毫秒为单位)scrollTo(scrollEle,500,{duration:500})//指定过渡动画效果,支持'gradually'/'liner'/'instant'scrollTo(scrollEle,500,{timingFunction:'gradually'})//指定过渡时间和动画效果scrollTo(scrollEle,500,{timingFunction:'liner',duration:500})//指定缓动因子,只对'gradually'方法有效scrollTo(scrollEle,500,{timingFunction:'gradually',factor:6})函数描述函数scrollTo(ele,pos,[options])ele目标可滚动元素pos指定滚动到的位置optionstimingFunction指定滚动的速度曲线,默认为'linear'duration指定滚动的时间,默认为1000factor指定逐渐滚动的因子,仅适用于渐进模式,小于100,大于1001项目地址:https://github.com/TheoXiong/...欢迎star