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

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

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


这个问题昨晚遇到过,先说一下。
首先,我估计你用的插件和我的一样都是监听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不能执行太多次。

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

【热门文章】
【热门文章】