Javascript:检测OS X“自然滚动”设置
我正面临一个问题。 对于我正在做的项目,我正在检测滚轮位置,并根据我正在导航到下一张幻灯片。 但问题是,一些Mac用户使用“自然滚动” – 反转他们在页面上的滚动。 这意味着,对于那些用户,我应该使用另一个方向的滚动作为触发器。
我的问题是; 有没有办法检测用户滚动的方向? 我最初的想法是跟踪滚动并查看scrollTop和scrollwheel如何相互关联(即,我记录鼠标滚轮事件并查看页面滚动的方向)。 但是,这需要用户在我知道该做什么之前滚动。 这不起作用,因为用户首先需要触发幻灯片更改。
我很茫然。 所有帮助表示赞赏。
实际上有一个简单的答案,只要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上收到滚轮事件时,您可以计算滚动方向并触发相应的滑动更改。