javascript - 在特定屏幕尺寸下禁用Mousewheel JS水平滚动

我正在使用.mousewheel将向下滚动转换为台式机上的水平滚动，但是对于移动设备，我想禁用此行为。我尝试了以下方法：

if ( $(window).width() > 480) {
    $('html, body, *').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * -0.5);
        e.preventDefault();
    });
}
else {
    $("html, body, *").bind("mousewheel", function() {
        return false;
    });
}

但是没有成功，水平滚动可以正常工作，但是正文内容仍在移动设备上锁定在适当的位置。

最佳答案

获取视口宽度：

var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

然后，您可以对if语句进行一些小的更改：

if (viewportWidth > 480) { ... }

完整代码示例

这包括对滚动翻译进行方式的一些“修复”-我无法获得以前的工作方式。

var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

if (viewportWidth > 480) {
    $('body').mousewheel(function(e) {
        $(this).scrollLeft($(this).scrollLeft() - e.deltaY);
        e.preventDefault();
    });
} else {
    $("body").on("mousewheel", function() { return false; });
}