使用javascript/jQuery在Chrome和FF中检测OS x“自然滚动方向”

8yoxcaq7  于 2023-05-04  发布在  Go
关注(0)|答案(1)|浏览(115)

我正面临一个问题。我试图检测OS X用户在使用Chrome或FF时是否启用了“自然滚动方向”。目前,我能够使用以下代码检测用户是否在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 & FF检测它。我需要它的原因是因为我想迫使用户在“反向滚动方向”滚动,换句话说,当用户向下滚动时,我需要页面向下滚动。
帮助是非常感谢!:)

0ejtzxu1

0ejtzxu11#

这是一个非常棘手的问题。由于滚轮事件的deltaY是由系统设置的(在它到达Web浏览器之前),因此它对于“向下滚动”总是正值,而对于“向上滚动”总是负值。
反转滚动行为很简单,但我们不知道是否需要这样做。当然,我们可以告诉用户我们想要的是什么,然后根据他们的答案反转滚动行为,但这不是很优雅。
我不知道你的用例是什么,但如果你处于“桌面模式”,并考虑将你的应用程序设置为Electron应用程序,那么你可以使用Electron的Node.js部分从Mac OS系统中读取滚动行为,使用shell命令:

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

相关问题