javascript - jQuery 鼠标滚轮问题

Question

我有一个功能可以防止鼠标滚轮的默认行为，并使其水平滚动，但问题是，当窗口宽度小于 970px 时，默认行为不起作用，即使我使用 return正确；

代码:

$(window).resize(function() {
    if($(window).width() >= 970) {
        $('.swiper-container').bind('mousewheel', function(event, delta) {
            this.scrollLeft -= (delta * event.deltaFactor);
            event.preventDefault();
        });
    } else {
        $('.swiper-container').bind('mousewheel', function(event, delta) {
            this.scrollTop -= (delta * event.deltaFactor);
            return true;
        });
    }
});

Answer 1

问题是 bind 添加了一个事件监听器，而不是替换它。因此，每次调整大小时，您都会添加多个监听器。相反，您可以只检查其内部的宽度。

$('.swiper-container').on('mousewheel', function(event, delta) {
    if($(window).width() >= 970) {
        this.scrollLeft -= (delta * event.deltaFactor);
        event.preventDefault();
    } else {
        this.scrollTop -= (delta * event.deltaFactor);
    }
});

此外，use on instead of bind 。如果您想要的是默认行为，您也不需要 else 部分。