fullpage.js滑轮上下滚动较快的时候屏幕就会乱窜。

发布于 2022-09-01 22:36:48 字数 72 浏览 12 评论 0

应用fullpage插件之后,在笔记本触摸板上,手指滑动幅度大就会变成一滑滑动两屏,pc端.滑轮 上下滚动较快的时候,屏幕就会乱窜

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

只是在用心讲痛 2022-09-08 22:36:48

这个问题昨晚遇到过,先说一下。
首先,我估计你用的插件和我的一样都是监听mousewheel事件,你会发现其实稍微滚一下鼠标滚轮,mousewheel事件实际上会触发N多次。所以一般我们都会设一个setTimeout来让用户感觉“只是滚了一次滚轮”时mousewheel事件只触发一次,否则就会发生“好像我只滚了一下,但是页面却一连跳了好几页”的现象。这个setTimeout一般都设置在300ms-500ms左右吧。

但是,笔记本的触摸板上有一个诡异的现象(比如我的mac), 似乎系统为了实现平滑滚动的效果还是其他原因(未考证),当你手指离开触摸板后mouserwheel依然还会执行一段时间,而且这段时间甚至会持续1-2秒,所以就会造成“貌似我只滚了一次,但是页面却跳了好几页”。
同样的道理,假如你的手指一直在滚动,或者说PC上的滚轮一直在滚动(这个貌似比较难,鼠标的滚轮形状貌似决定了你不能一直拨动很久),当持续的时间超过这个setTimeout之后,就会触发第2次甚至第3次mousewheel事件,页面就会跳。
而你说的乱窜也是差不多的原因,只是说你这样上下滚动在每次setTimeout峰值时间过后滚动的方向是不确定的,所以它会跳来跳去。

解决的办法:

  1. 加大这个setTimeout的值。

  2. 加入一个信号量flag,只有flag==true时才执行mousewheel事件,当开始滚动滚轮后flag = false,将当每一屏的动画执行完毕后,这个信号量才置为true,这样就能极大减少用户误操作的次数了。
    原理都是让一段时间内,mousewheel不能执行太多次。

但缺点是也可能会让某些用户觉得够不流畅。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文