mac笔记本的触控板多次触发滚轮事件 mousewheel

133 阅读 0 评论 88 点赞

我是靠谱客的博主成就蛋挞，这篇文章主要介绍mac笔记本的触控板多次触发滚轮事件 mousewheel，现在分享给大家，希望可以做个参考。

自己写的翻页效果，但是在mac 触板滑动上遇到点麻烦：mac 触板长滑动一次，mousewheel 事件持续触发将近1.5秒，我想通过防抖和节流的方式解决，但是效果都不是很好

1.节流方式代码如下：这样即便翻页动画做完，还是必须等计时器1.5秒运行结束，把toScroll 设置为true ,才能执行下一次。感觉不流畅。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
document.addEventListener('mousewheel', function (event) {
if(!$('.cms-home').length){
return;
}
event.preventDefault();
if(numItems==0){
return;
}
var _toDown = event.wheelDelta > 0;
blockSwipe(_toDown,1500);
}, {passive: false});
function blockSwipe(toDown,delayScroll) {
if(toScroll){
toScroll = false;
if (toDown) {
if(currentItem == 0){
toScroll = true;
return;
}else{
currentItem --;
smoothScroll($(".home-block").eq(currentItem));
buttonCheck(numItems,currentItem);
setTimeout(function () {
toScroll = true;
},delayScroll)
}
} else {
if(currentItem == numItems){
toScroll = true;
return;
}else{
currentItem ++;
smoothScroll($(".home-block").eq(currentItem));
buttonCheck(numItems,currentItem);
setTimeout(function () {
toScroll = true;
},delayScroll)
}
}
}
}

2.去抖动方式代码如下：这样可能动画执行完，mousewheel 还在触发，toScroll 无法设置为true，用户又滑动一次，又得等1.5秒（大概）左右。这时用户觉得动画不执行，1.5秒还没到（大概），mousewheel 还在触发，又滑动一次。。。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
document.addEventListener('mousewheel', function (event) {
if(!$('.cms-home').length){
return;
}
event.preventDefault();
if(numItems==0){
return;
}
var _toDown = event.wheelDelta > 0;
blockSwipe(_toDown);
clearTimeout(timer);
var timer = setTimeout(function () {
toScroll = true;
},500)
}, {passive: false});
function blockSwipe(toDown,delayScroll) {
if(toScroll){
toScroll = false;
if (toDown) {
if(currentItem == 0){
toScroll = true;
return;
}else{
currentItem --;
smoothScroll($(".home-block").eq(currentItem));
buttonCheck(numItems,currentItem);
}
} else {
if(currentItem == numItems){
toScroll = true;
return;
}else{
currentItem ++;
smoothScroll($(".home-block").eq(currentItem));
buttonCheck(numItems,currentItem);
}
}
}
}