Javascript：检测OS X“自然滚动”设置 [英] Javascript: detect OS X "natural scroll" settings

问题描述

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

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

我不知所措。所有帮助表示感谢。

解决方案

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

  function myWheelEventHandler（event）{
 var deltaY = -event.wheelDeltaY; 
 if（event.webkitDirectionInvertedFromDevice）deltaY = -deltaY; 
 //使用值作为
 
 
 
 $ b 
在这个例子中，当用户将鼠标滚轮从他们（或相当于触控板等）滚动时，deltaY将为正值，否则为负，无论系统范围内的自然滚动设置如何。 
 
换句话说，如果webkitDirectionInvertedFromDevice属性存在并且值 true ，那么您可以确定启用了自然滚动。如果在脚本运行时设置发生更改，它甚至会更新。该属性仅适用于车轮事件（不滚动事件）。
 
 
 
如果该属性不存在或存在，但其值为false（将始终在Chrome中，由于一个bug），那么不幸的是，你不知道滚动方向是否颠倒过来。
 
 
 
你的测试想法是看看页面在轮子事件上移动可能是最稳健的解决方案。您可以在幻灯片放映前创建一个不可见（空白）的div，设置为溢出：滚动，其中有一个较高的空div。第一次在这个div上收到一个轮子事件时，您可以确定滚动方向并触发相应的幻灯片更改。
 
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. 

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.
解决方案
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
}
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.

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).

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.

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屋！