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

2024-03-09

我面临一个问题。对于我正在做的项目,我正在检测滚轮位置,并根据该位置是否导航到下一张幻灯片。然而,一个问题是,一些 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(使用前将#替换为@)

Javascript:检测 OS X“自然滚动”设置 的相关文章

随机推荐

  • 当用户移动相机时,为了高效拍照,Android 相机 api 参数优化有哪些?

    我正在创建一个 Android 应用程序 它有点像定格动画应用程序 旨在即使在运动过程中也能有效拍照 我想设置非常低的快门速度和高光圈以获得更好的照片 特别是当相机处于运动状态时 但是堆栈溢出上的一些答案表明我不可能设置快门速度和光圈 如果
  • aws:boto3 获取负载均衡器的所有实例

    我可以使用下面的方法获得负载均衡器 import boto3 elb boto3 client elbv2 lbs elb describe load balancers 如何获取实例lbs 另外 我如何获取状态不活动的负载均衡器 因为de
  • Scala - 初始化 REPL 环境

    你好 我想嵌入 Scala REPL初始化环境进入我的应用程序 我看过IMain类 看来我可以通过它的实例来做到这一点 创建实例 然后将其存储到intp公共变量在process of ILoop 我如何绑定一些名称和 或之前添加一些导入pr
  • 尝试将新包发布到 NPM 时收到 404

    我刚刚创建了一个新包装 https github com supericium pli 我现在第一次尝试将其发布到 NPM 如下所示 ole MKI Sandbox pli npm publish access public npm ERR
  • Bash 'for' 循环语法?

    Bash 的语法是什么for loop 我努力了 for i 0 i lt 10 i do echo i done 我收到此错误 line 1 0 syntax error operand expected error token is 0
  • 在 npm install socket.io 期间,出现错误 127,未找到 node-waf 命令。怎么解决呢?

    我正在尝试使用node js 包管理器在centos 5 上安装socket io 在安装过程中我遇到了一个错误 make node waf 找不到命令 and 这很可能是 ws 包的问题 npm install socket io npm
  • 如何在 Laravel 集成测试中等待页面重新加载

    我们有一个操作来编辑重定向到同一页面的用户配置文件 这里 seePageIs 似乎没有等待新页面加载 以下测试失败 因为在响应中找不到新用户名 当我们在测试后手动加载个人资料页面时 它已正确更新 public function testCa
  • 此反应库代码周围的“{”“}”大括号有何意义? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我正在查看反应库代码 经过我发现一段特殊的代码我无法理解它的意义 有人可以帮忙吗 var validateFormat funct
  • jQuery datepicker 导致页面溢出

    我正在使用 jQuery ui 1 8 中的 datepicker 控件 from date是文本输入 我附上一个非常简单的日期选择器 from date datepicker 这会导致页面溢出 垂直滚动条 我试图避免这种情况 一旦我单击起
  • 无法解析类型“uint32_t”

    我正在 Eclipse 3 8 1 CDT 中开发 C 程序 我在 Debian 8 上使用 gcc 编译器 我还使用一个用 C 编写的名为 opendnp3 的开源库 它需要uint32 t来解析 因为它是多个方法调用和构造函数中的参数
  • 在执行过程中停止 Rhino 引擎

    Rhino 引擎是否有一个 api 可以停止执行 脚本fie在中间 例如 我有一个脚本文件 其中 有一个无限循环 怎样才能中途停止执行呢 当然 我可以停止启动Rhino引擎的jvm 执行脚本 但我不想因为这个原因终止整个 jvm 会话 因为
  • Javascript 排序以匹配 SQL Server 排序

    任何人都可以向我指出 JavaScript 中的排序算法 该算法的排序方式与 SQL Server 的排序方式相同 对于 nvarchar unicode 列 作为参考 我之前关于此行为的问题可以在这里找到 SQL Server 2008
  • 像 RStudio 这样的 Python 工作流程?

    我使用 Python 作为主要编程语言 有时会切换到 R 来执行快速数据分析任务 因为它具有用于统计编程目的的庞大库 尽管pandas http pandas pydata org 对于 python 来说太棒了 我猜大多数 R 用户都会选
  • 无法在 Android 模拟器中模拟位置数据

    我正在尝试测试我的应用程序 它使用模拟器使用地理定位 介绍了几种方法here https stackoverflow com questions 2279647 how to emulate gps location in the andr
  • 如何在数字数组中找到最佳匹配元素?

    我需要帮助解决一些看似简单但让我困惑的事情 尝试编写一些模糊匹配方法来处理根据需要计算的值与选择列表中实际可用的值之间的格式差异 价值 期权执行价格 始终是计算出的 Float 例如85 0 or Int 该数组包含字符串形式的数字 无论是
  • Jackson deearlization:根上有两个键。我如何打开其中一个并忽略另一个?

    使用杰克逊 2 x json 响应如下所示 flag true important id 123 email email protected cdn cgi l email protection flag 键不提供任何有用的信息 我想忽略
  • 为什么 C++ 编译器在创建机器代码之前将源代码翻译成汇编? [复制]

    这个问题在这里已经有答案了 我开始学习C 了解到编译器通过编译将源代码从程序变成机器代码 然而 我了解到 C 编译器实际上将源代码转换为汇编代码 作为将汇编代码转换为机器代码之前的中间步骤 这一步的目的是什么 他们为什么不直接将其翻译成机器
  • Reactjs/Apollo/AppSync 突变触发两次

    我遇到了 React Apollo AppSync 的问题 突变触发了两次 或多次 我有一个 React 应用程序 它有一个由通常的 UI 按钮 onClick 触发的更新突变
  • VS2012 发布网站 dll 而不是 cs 文件

    我有一个想要发布的简单 ASP NET 项目 我右键单击该项目并按 发布网站 但这会将我的所有 cs 文件生成到所选文件夹中 之前我一直在 bin 文件夹中获取 dll 文件而不是 cs 文件 我究竟做错了什么 问题可能出在发布设置中 请检
  • Javascript:检测 OS X“自然滚动”设置

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