Question

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

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

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

Answer 1

只要Mac用户使用Safari -

，这实际上是一个简单的答案

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

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

换句话说，如果webkitDirectionInvertedFromDevice属性存在且值为true，那么您可以确定＆＃34;自然＆＃34;滚动已启用。如果在脚本运行时设置发生更改，它甚至会更新。该属性仅适用于轮子事件（不是滚动事件）。

如果该财产不存在，或存在但具有值＆＃34; false＆＃34; （由于存在错误，Chrome中的情况总是如此），但遗憾的是，您不知道滚动方向是否反转。

您想要测试页面如何在轮子事件上移动的想法可能是最强大的解决方案。您可以在幻灯片放映前创建一个不可见（空）div，设置为溢出：滚动，其中有一个较高的空div。第一次在此div上收到滚轮事件时，您可以计算滚动方向并触发相应的滑动更改。

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

1 个答案: