fullpage.js滑轮上下滚动较快的时候屏幕就会乱窜。
应用fullpage插件之后,在笔记本触摸板上,手指滑动幅度大就会变成一滑滑动两屏,pc端.滑轮 上下滚动较快的时候,屏幕就会乱窜
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
应用fullpage插件之后,在笔记本触摸板上,手指滑动幅度大就会变成一滑滑动两屏,pc端.滑轮 上下滚动较快的时候,屏幕就会乱窜
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(1)
这个问题昨晚遇到过,先说一下。
首先,我估计你用的插件和我的一样都是监听mousewheel事件,你会发现其实稍微滚一下鼠标滚轮,mousewheel事件实际上会触发N多次。所以一般我们都会设一个setTimeout来让用户感觉“只是滚了一次滚轮”时mousewheel事件只触发一次,否则就会发生“好像我只滚了一下,但是页面却一连跳了好几页”的现象。这个setTimeout一般都设置在300ms-500ms左右吧。
但是,笔记本的触摸板上有一个诡异的现象(比如我的mac), 似乎系统为了实现平滑滚动的效果还是其他原因(未考证),当你手指离开触摸板后mouserwheel依然还会执行一段时间,而且这段时间甚至会持续1-2秒,所以就会造成“貌似我只滚了一次,但是页面却跳了好几页”。
同样的道理,假如你的手指一直在滚动,或者说PC上的滚轮一直在滚动(这个貌似比较难,鼠标的滚轮形状貌似决定了你不能一直拨动很久),当持续的时间超过这个setTimeout之后,就会触发第2次甚至第3次mousewheel事件,页面就会跳。
而你说的乱窜也是差不多的原因,只是说你这样上下滚动在每次setTimeout峰值时间过后滚动的方向是不确定的,所以它会跳来跳去。
解决的办法:
加大这个setTimeout的值。
加入一个信号量flag,只有flag==true时才执行mousewheel事件,当开始滚动滚轮后flag = false,将当每一屏的动画执行完毕后,这个信号量才置为true,这样就能极大减少用户误操作的次数了。
原理都是让一段时间内,mousewheel不能执行太多次。
但缺点是也可能会让某些用户觉得够不流畅。