Web端：Mousewheel滚动插件之滚动过快跳屏优化

相信大家都会用jquery，最近用了一款jquery滑动插件mousewheel，效果实现了，但是当鼠标滚轮滑动过快时，会跳屏/不跳屏/不移动。 现在提供优化方案，直接上我的代码(如需使用请使用底部的简化代码)：

    //鼠标滚轮事件
    $("body").bind('mousewheel', function(event, delta) {
        var $this = $(this),
            timeoutId = $this.data('timeoutId');
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        $this.data('timeoutId', setTimeout(function() {
            event.preventDefault();
            var scrollTop = this.scrollTop;
            this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
            var flag = event.deltaY;
            console.log(event.deltaY, event.deltaX,event.deltaFactor,);
            //下滑 event.deltaY=-1 上滑 event.deltaY=1
            if (flag === 1) {
                if (i > 0) {
                    //页面上滑
                    i--;
                    $(".bullets li").eq(i).click();
                }
            } else {
                if (i < ($(".top_bar a").length - 1)) {
                    //页面下滑
                    i++;
                    $(".bullets li").eq(i).click()；
                }
            }
            $this.removeData('timeoutId');
            $this = null
        }, 100));
        return false;
    });

 

简化(可以直接copy使用）：

$("#事件类名").bind('mousewheel', function(event, delta) {
    var $this = $(this),
        timeoutId = $this.data('timeoutId');
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
    $this.data('timeoutId', setTimeout(function() {
        //do something(你的事件逻辑)
        $this.removeData('timeoutId');
        $this = null
    }, 100));
    return false;
});

效果解释：无论你鼠标滚轮滚动多快！一次只会执行一次滚动事件，保证事件逻辑中不出现错误。

 

 记录下！仅供自己学习，参考。 有不懂的欢迎留言讨论。