使用javascript/jQuery检测Chrome和FF中的操作系统x的“自然滚动方向”

Question

我遇到了一个问题。我正在尝试检测在使用Chrome或者Firefox的时候，OS X用户是否启用了"自然滚动方向"。目前，我已经能够使用下面的代码检测到如果用户在使用Safari。

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': function(e, delta) {
if(Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
    if(e.originalEvent.webkitDirectionInvertedFromDevice) {
        this.scrollTop += (delta);
        e.preventDefault();
    }
}}});

这个stackoverflow页面帮助我解决了Safari浏览器的问题。Javascript: detect OS X "natural scroll" settings

是否有可能在chrome和火狐浏览器中检测它？我需要这么做的原因是我想强制用户使用“反向滚动方向”，换句话说，当用户向下滚动时，我需要页面向下滚动。

非常感谢您的帮助！:)

- Tony Make

---

监听鼠标滚轮向下滚动并检查其滚动方向，这应该是可行的吧？ - john Smith

Answer 1

这是一个非常棘手的问题。由于滚轮事件的deltaY是由系统设置的（在它到达网页浏览器之前），因此对于“向下滚动”，它始终为正，对于“向上滚动”，它始终为负。

反转滚动行为很容易，但我们不知道是否需要这样做。当然，我们可以告诉用户我们真正想要什么，然后根据他们的答案来反转滚动行为，但这不太优雅。

我不知道你的用例是什么，但如果你在“桌面模式”下，并且考虑将你的应用程序变成Electron应用程序，那么你可以使用Electron的Node.js部分，使用shell命令从Mac OS系统读取滚动行为：

defaults read -g com.apple.swipescrolldirection

我知道这不是你想听的...如果我有更好的想法，我会告诉你。

编辑

作为一种快速且粗略的解决方案，假设几乎所有的Mac用户都将滚动设置为“自然”（这是多年来的系统默认设置），并执行以下操作：

if (navigator.platform = 'MacIntel') {
  window.addEventListener('wheel', e => {
    e.preventDefault();
    window.scrollTo(window.scrollX + e.deltaX, window.scrollY - e.deltaY);
  }, { passive: false });
}

- Thomas Frank