我正在尝试将一些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()
函数并没有真正删除我的侦听器功能。
你知道这是怎么回事吗?
1条答案
按热度按时间0sgqnhkj1#
当你调整窗口大小时,你绑定了很多次wheel handler。我建议你绑定一次,然后检查一下窗口的宽度。可能是这样的: