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“自然滚动”设置 的相关文章

  • 如何发出HTTP请求将文件从reactjs上传到googledrive?

    我对文档有点困惑 我做了我的研究 资源很少 也许有人可以帮助我 我正在使用 CRNA create react app 我有一个按钮 可以使用 URI 将文件上传到 Google Drive 我已经有了 API 密钥 客户端 ID 启用 A
  • 如何避免在 ASP.NET 代码隐藏中编写混乱的 JavaScript?

    我想知道在 ASP NET 中使用 Javascript 的最佳实践是什么 我不知道这是否是最佳实践 但我在代码隐藏中添加了 javascript 客户端事件 它工作正常 但这是最佳实践吗 例如 我有一个单选按钮控件 并在 Page Ini
  • 在 jQuery 中,如果我有一个开始类和结束类,我如何用 div 包装多个元素

    好的 这里有一些 html 我有一些开始和结束课程 但为此我只添加了每门课程 1 门 div span nbsp span div div span nbsp span div div class start lt start span n
  • 使用 useCallback 并使用先前状态作为参数设置新对象状态

    考虑这个带有自定义表单钩子的基本表单字段组件来处理输入更改 import React useState useCallback from react const useFormInputs initialState gt const val
  • jQuery - 禁用选定的选项

    需要使用 jQuery 禁用选择框中已选择的选项 我希望它变灰 就像汇编选择 http www ryancramer com projects asmselect examples example1 html 测试我的例子here http
  • 使用 jQuery 从字符中获取文本

    我想在出现特定字符后从字符串中获取文本 比方说 文本文本文本 abc 我想得到 abc jquery 中这是如何完成的 这对某些人来说可能是微不足道的 但我对 jQuery 没有什么经验 你可以这样做 var text texttextte
  • 在tinymce 4中裁剪后上传图像

    我正在开发tinymce 并且已经实现了imagetools 现在 当图像插入到文本编辑器中 然后我编辑 裁剪图像时 它将图像 src 更改为类似的内容blob www localhost asdf ghij 我想要的是裁剪后我可以将此 u
  • jQuery 文件上传:是否可以使用提交按钮触发上传?

    我在用着jQuery 文件上传 https github com blueimp jQuery File Upload用于基于 AJAX 的上传 它总是在选择文件后开始上传 是否可以更改行为以使用 提交 按钮 我知道问题 35 https
  • 如何在生成的 HTML 页面中隐藏 JavaScript 注释? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有没有办法隐藏生成的页面源中的 JS
  • 在 MatDialog Content Angular 7 中添加新行

    我正在使用 MatDialog 并尝试在内容定义中添加新行 两个都 n and 没有这样做 有没有另一种方法无需手动进入 html 并更改它 因为它是可重用的组件 var status MatDialogRef
  • AWS DynamoDb DocumentClient - 从项目数组创建批量写入 - node.js

    我正在尝试执行batchWrite使用 DynamoDB 的操作DocumentClient来自项目数组 JSON 这是我的代码 var items for i 0 i lt orders length i var ord orders i
  • innerHTML 未写入 svg 组 Firefox 和 IE

    我正在做一个项目 遇到了障碍 在 Chrome 中 它按预期工作 但在 Firefox 和 IE 中则不然 下面的代码实际上只是真实项目代码的非常简化的版本 基本上我正在尝试替换 svg 的每组中的圆圈 因此 我从预编码的圆圈开始 然后删除
  • BigVideo.js 播放结束时 URL 重定向

    我已经使用基于 Video js 的 BigVideo 在页面上实现了背景视频 单击 div 时 视频会在后台播放 我一生都无法弄清楚如何在视频播放完毕后重定向到另一个 URL 这是我正在使用的代码 视频播放链接 a href vids g
  • 动态 getter 和 setter - 一种可能性

    我正在尝试解决最近出现的一个问题 假设我们想要并且知道如何在 javascript 中使用动态 getter 和 setter 就像 php 中的那样 get set 但由于 javascript 没有包罗万象的属性 我们唯一能做的就是提供
  • 如何为 jQuery 制作 switch case?

    我有这个 if else 语句 它给了我奇怪的响应 每当我首先选择 输出 时 之后选择的任何其他内容都不会出现 仅供参考 我正在使用多重选择 因此我可以选择并显示任意数量的内容 outputText hide armCB hide outp
  • Web 动画 API - 不同的动画持续时间?

    我正在尝试 Web Animations API 该 API 目前仅适用于 Webkit 浏览器 可以想象 文档有点稀疏 这是我在上面找到的一篇博客文章 http updates html5rocks com 2014 05 Web Ani
  • 如何在 TypeScript 中声明私有抽象方法?

    如何在 TypeScript 中正确定义私有抽象方法 这是一个简单的代码 abstract class Fruit name string constructor name string this name name abstract pr
  • jquery中(“*”)有什么用

    我正在阅读 jQuery 我不知道为什么使用 请解释一下这有帮助 是jquery中的一个选择器 它可以无条件地选择所有内容 包括html head和body 这是一个解释其用法的示例 document ready function butt
  • 如何取消 jquery.load()?

    当 load 在 5 秒内没有返回时 我想取消 load 操作 如果是这样 我会显示一条错误消息 例如 抱歉 没有加载图片 我所拥有的是 超时处理 jQuery fn idle function time postFunction var
  • 实现npm包自定义组件VueJS

    我正在尝试使用以下 npm package 来绕过 X frame 选项 https www npmjs com package x frame bypass https www npmjs com package x frame bypa

随机推荐

  • 当用户移动相机时,为了高效拍照,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 用户使用 自然滚动 反转页面上的滚动 这意味着 对于这些用户 我应该使用另一个方向的滚动作为触发器 我的问题是 有没