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

最新推荐文章于 2024-08-27 21:14:30 发布

菜菜的戈麦斯

最新推荐文章于 2024-08-27 21:14:30 发布

阅读量2.4k

点赞数

分类专栏： js 文章标签： mac 触板滚轮事件 mousewheel

本文链接：https://blog.csdn.net/qq_39950233/article/details/98681258

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自己写的翻页效果，但是在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 ，但是我研究好久都没看出来(菜菜的)。