jquery 水平滚动鼠标滚轮在香草JS

wwtsj6pe  于 2023-01-16  发布在  jQuery
关注(0)|答案(1)|浏览(149)

我正在尝试将一些jQuery代码迁移到vanilla JS中,它将鼠标滚轮行为修改为水平滚动站点而不是垂直滚动:

jQuery:

var wheel = function() {
    var width = $( window ).width();
    if ( width > 954 ) {
        $( 'html' ).on( 'wheel', function( e ) {
            e.preventDefault();
            if ( Math.abs( e.originalEvent.deltaY ) >= Math.abs( e.originalEvent.deltaX ) ) {
                this.scrollLeft += ( e.originalEvent.deltaY * 10 );
            } else {
                this.scrollLeft -= ( e.originalEvent.deltaX * 10 );
            }
        } );
    } else {
        $( 'html' ).off( 'wheel' );
    }
}
wheel();
$( window ).on( 'resize', wheel );

如您所见(if (width > 954)),新行为只在桌面设备上设置,而不是在移动的设备或平板设备上。

香草JS:

var wheel = function() {
    var width = window.innerWidth;
    var scroll = function( e ) {
        e.preventDefault();
        if ( Math.abs( e.deltaY ) >= Math.abs( e.deltaX ) ) {
            this.scrollLeft += ( e.deltaY * 10 );
        } else {
            this.scrollLeft -= ( e.deltaX * 10 );
        }
    } 
    if ( width > 954 ) {
        document.documentElement.addEventListener( 'wheel', scroll );
    } else {
        document.documentElement.removeEventListener( 'wheel', scroll );
    }
}
wheel();
window.addEventListener( 'resize', wheel );

但是,当我将窗口大小调整到平板电脑/移动的的宽度时,水平滚动并没有被禁用,我也不能垂直滚动网站。看起来removeEventListener()函数并没有真正删除我的侦听器功能。
你知道这是怎么回事吗?

0sgqnhkj

0sgqnhkj1#

当你调整窗口大小时,你绑定了很多次wheel handler。我建议你绑定一次,然后检查一下窗口的宽度。可能是这样的:

var scroll = function( e ) {
    var width = window.innerWidth;
    if(width <= 954) return;
        
    e.preventDefault();
    if ( Math.abs( e.deltaY ) >= Math.abs( e.deltaX ) ) {
        this.scrollLeft += ( e.deltaY * 10 );
    } else {
        this.scrollLeft -= ( e.deltaX * 10 );
    }
}

document.documentElement.addEventListener( 'wheel', scroll);

相关问题