Javascript:检测OS X和“自然滚动".设定 [英] Javascript: detect OS X "natural scroll" settings

问题描述

我遇到了一个问题.对于一个项目，我正在检测滚轮的位置，并据此导航至下一张幻灯片.但是，问题是某些Mac用户使用自然滚动"-反转页面滚动.这意味着，对于那些用户，我应该使用另一方向的滚动作为触发.

I'm facing an issue. For a project I'm doing I'm detecting the scrollwheel position and based on that I'm navigating to the next slide or not. A problem is, however, that some Mac users use "natural scroll" - inverting their scrolling on pages. This means that, for those users, I should use scroll in the other direction as trigger.

我的问题是；有没有一种方法可以检测用户习惯于朝哪个方向滚动?我最初的想法是跟踪滚动并查看scrollTop和scrollwheel如何相互关联(即，我记录鼠标滚轮事件并查看页面滚动的方向).但是，那需要用户滚动才能知道该怎么做.这不起作用，因为用户首先需要触发幻灯片更改.

My question is; is there a way to detect in what direction the user is used to scroll? My initial idea was to track scrolling and see how scrollTop and scrollwheel relate to each other (i.e., I record mousewheel events and see which direction the page scrolls as a result). That, however, requires the user to scroll before I know what to do. Which doesn't work, as users first need to trigger a slide change.

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

I'm at a loss. All help is appreciated.

推荐答案

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

There's actually an easy answer, as long the Mac users are using Safari--

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

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

In this example, the value of deltaY will be positive when the user rolls the mouse wheel away from them (or the trackpad equivalent), and negative otherwise, regardless of the system-wide "natural" scroll setting.

换句话说，如果存在webkitDirectionInvertedFromDevice属性并且其值为 true ，则可以确保启用了自然"滚动.如果在脚本运行时更改设置，它甚至会更新.该属性仅适用于滚轮事件(不适用于滚动事件).

In other words, if the webkitDirectionInvertedFromDevice property is present and has the value true, then you can be sure "natural" scrolling is enabled. It even updates if the setting changes while your script is running. The property is available for wheel events only (not scroll events).

如果该属性不存在，或者存在但其值为"false"(由于错误，这在Chrome中通常是这种情况)，那么很遗憾，您不知道滚动方向是反向还是反向不是.

If the property is not present, or is present but has the value "false" (which will always be the case in Chrome, due to a bug), then unfortunately you don't know if the scroll direction is reversed or not.

您进行测试以查看页面在车轮事件中如何运动的想法可能是最可靠的解决方案.您可以在幻灯片的前面创建一个不可见的(空)div，将其设置为overflow:scroll，其中包含一个较高的空div.第一次在该div上收到wheel事件时，您可以确定滚动方向并触发相应的幻灯片更改.

Your idea of testing to see how the page moves on wheel events may be the most robust solution. You could create an invisible (empty) div in front of your slideshow, set to overflow:scroll, with a taller empty div inside it. The first time you receive a wheel event on this div, you could then work out the scroll direction and trigger the appropriate slide change.

这篇关于Javascript:检测OS X和“自然滚动".设定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！