鼠标快速滚动事件优化

2023-09-24 05:43| 来源: 网络整理| 查看: 265

项目背景

在最近得一个项目中，需要根据鼠标滚轮控制页面移动，再根据页面移动的距离产生不同的动画，但滑动很快时，有些动画还没结束就播放其他动画，且页面滚动异常。

解决思路首先想的是给鼠标事件加个防抖，如下： $('body').mousewheel(function(ev,delta){ clearTimeout(timer); timer = setTimeout(function(){ //事件处理 },200) })

但只解决了滑动过快时页面滚动异常问题

关于动画还没结束就播放其他动画的问题，想了个设置个状态来控制优化。如下： var scrolled = true $('body').mousewheel(function(ev,delta){ if(scrolled){ scrolled = false clearTimeout(timer); timer = setTimeout(function(){ //每次动画结束后才能响应其他动画 $('html,body').animate({scrollTop: 0}, 'normal',"linear",function(){ scrolled = true }); },200) } })

在每次动画或移动结束后，scrolled置为true，才能进行下一步的响应。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章