vue计算滚动条滚动速度
来源:     阅读:532
云上智慧
发布于 2020-04-24 15:40
查看主页

计算页面滚动效果如下image

思路:利用滚动条监听事件和定时器,来计算滚动速度;监听事件是只需你滚动条在动就会触发的所以需要定时器来计算滚动速度。


代码:计算滚动速度的功能在handleScroll()函数里实现,将其挂载在mounted(){}中就可

handleScroll() {      var scrollTop =        document.documentElement.scrollTop || document.body.scrollTop;      //如何计算滚动速度???      //利用定时器,来计算滚动速度(滚动条在timeScale没有被连续滚动则结束间隔)      let distance = 0,        startTimer = null,        beginTime = 0,        speed = 0;      const timeScale = 100; //检测滚动中止的时间      window.onscroll = () => {        let tempScrollTop =          document.documentElement.scrollTop || document.body.scrollTop;        distance += tempScrollTop - scrollTop; //间隔时间内滑动的距离(+向下,-向上)        console.log('distance',distance)        scrollTop = tempScrollTop; //下一次滚动开始时滚动条初始位置        clearTimeout(startTimer); //清理开始定时器        if (!beginTime) {          beginTime = new Date().getTime(); //假如timer为0,则开始滚动,则获取起始时间          //console.log(beginTime)        }        startTimer = setTimeout(() => {          //设置开始定时器          let overTime = new Date().getTime(); //延时500ms后,滚动后结束的时间          //console.log(overTime)          let diffTimer = (overTime - beginTime - timeScale) / 1000; //时间差 = 结束-开始-500ms          speed = distance / diffTimer;          distance = 0; //间隔距离归零          beginTime = 0; //起始时间          console.log('speed',speed);        }, timeScale);      };    }
免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 服务器应用
相关推荐
使用 dpdm 定位 JavaScript/TypeScript 中的循环依赖
华为交换机 SSH 配置保姆级教程!小白也能轻松搞定远程管理
微信小程序开发学习笔记
如何在10分钟内让Android应用大小减少 60%?
避免糟糕的 git commit之git hooks
首页
搜索
订单
购物车
我的