Javascript:检测 OS X "natural scroll"设置

Question

我遇到了一个问题。对于我正在做的项目，我正在检测滚轮位置，并根据它导航到下一张幻灯片。然而，一个问题是，一些 Mac 用户使用“自然滚动”——反转他们在页面上的滚动。这意味着，对于那些用户，我应该使用另一个方向的滚 Action 为触发器。

我的问题是；有没有办法检测用户习惯滚动的方向？我最初的想法是跟踪滚动并查看 scrollTop 和 scrollwheel 如何相互关联(即，我记录鼠标滚轮事件并查看页面滚动的方向)。然而，这需要用户在我知道要做什么之前滚动。这是行不通的，因为用户首先需要触发幻灯片更改。

我很迷茫。感谢所有帮助。

Answer 1

实际上有一个简单的答案，只要 Mac 用户使用的是 Safari--

function myWheelEventHandler(event) {
  var deltaY = -event.wheelDeltaY;
  if (event.webkitDirectionInvertedFromDevice) deltaY = -deltaY;
  // use value for something
}

在此示例中，无论系统范围的“自然”滚动设置如何，当用户将鼠标滚轮(或等效触控板)滚离它们时，deltaY 的值将为正，否则为负。

换句话说，如果 webkitDirectionInvertedFromDevice 属性存在并且值为 true，那么您可以确定启用了“自然”滚动。如果在脚本运行时设置发生变化，它甚至会更新。该属性仅适用于滚轮事件(不适用于滚动事件)。

如果该属性不存在，或者存在但值为“false”(由于错误，在 Chrome 中总是如此)，那么很遗憾，您不知道滚动方向是反向的还是不是。

您通过测试查看页面如何在滚轮事件上移动的想法可能是最可靠的解决方案。您可以在幻灯片放映前创建一个不可见(空)的 div，设置为 overflow:scroll，其中包含一个更高的空 div。第一次收到此 div 上的滚轮事件时，您可以确定滚动方向并触发适当的滑动变化。