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

101 阅读 0 评论 67 点赞

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

概述

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

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

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 还在触发，又滑动一次。。。

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);
}
}
}
}

我实在想不到办法，这个issue对于我就像无解之谜。fullpage.js好像解决了这个issue ，但是我研究好久都没看出来(菜菜的)。