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) { ... }

完整代码示例

这包括一些＆＃34;修复＆＃34;随着滚动翻译的发生方式 - 我无法获得以前的工作方式。

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水平滚动

1 个答案:

完整代码示例