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

Question

我正在使用 .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;
    });
}

但没有成功，水平滚动工作正常，但正文内容在移动设备上仍被锁定。

Answer 1

获取视口宽度：

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

然后你可以对你的 if 声明做一个小改动：

if (viewportWidth > 480) { ... }

完整代码示例

这包括一些 "fix-up" 滚动翻译发生的方式 - 我无法使用以前的方式工作。

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; });
}

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

Disabling Mousewheel JS horizontal scroll under certain screen size

javascript

jquery

scroll

mousewheel

完整代码示例