Javascript：检测 OS X“自然滚动”设置答案

【问题标题】：Javascript: detect OS X "natural scroll" settingsJavascript：检测 OS X“自然滚动”设置
【发布时间】：2014-03-25 23:34:18
【问题描述】：

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

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

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

【问题讨论】：

只是一个想法：重要吗？如果您的幻灯片是水平的，那么向上滚动应该向左或向右导航是相当随意的。记住这一点：我猜 Mac 用户应该习惯于不同的滚动方向（他们必须一直改变，例如当他们在城市图书馆使用 PC 时......）。如果我是你，我不会在这上面花太多时间；）
另一个想法：mac 不只是反转触发的事件吗？所以浏览器不会知道用户如何滚动，它只接收向上滚动和向下滚动事件。（Mac 用户需要对此进行测试；））
是的，我就是这么想的......页面仍然下降。存储偏移量并与前一个进行比较，无论移动如何，都应该告诉您方向。
@giorgio 很重要，因为我们正在上下滑动。不幸的是，Mac 不会触发它们倒置。鼠标滚轮事件仅显示触控板或鼠标滚轮上发生的情况。 @jorg，不幸的是，这只适用于第二张幻灯片和上

标签： javascript jquery html scroll

【解决方案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，设置为溢出：滚动，里面有一个更高的空 div。当您第一次在这个 div 上收到滚轮事件时，您可以计算出滚动方向并触发相应的幻灯片更改。

【讨论】：