我面临一个问题。对于我正在做的项目,我正在检测滚轮位置,并根据该位置是否导航到下一张幻灯片。然而,一个问题是,一些 Mac 用户使用“自然滚动”——反转页面上的滚动。这意味着,对于这些用户,我应该使用另一个方向的滚动作为触发器。
我的问题是;有没有办法检测用户习惯滚动的方向?我最初的想法是跟踪滚动并查看滚动顶部和滚轮如何相互关联(即,我记录鼠标滚轮事件并查看页面滚动的方向)。然而,这需要用户在我知道要做什么之前滚动。这是行不通的,因为用户首先需要触发幻灯片更改。
我不知所措。感谢所有帮助。
实际上有一个简单的答案,只要 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 上收到滚轮事件时,您可以计算出滚动方向并触发适当的幻灯片更改。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)