程序员经验分享-hwhale

JS 中的触摸板滚动检测，无库

2024-05-03

我正在制作自己的小型 Javascript 库，可以轻松地将您网站（和我的网站）的默认滚动条替换为自定义滚动条。其中一部分意味着为 BODY 元素提供“overflow:hidden”样式来隐藏正常的滚动条。但是，这会阻止除代码中完成的滚动之外的所有滚动。

我已经完成了显示栏并在您单击/拖动它时滚动它的所有工作。然而，许多触摸板（比如我正在测试的计算机上）都有一个功能，您可以通过沿着触摸板右侧滑动手指来滚动。我需要库不要破坏它，所以我需要某种方法来检测用户何时尝试以这种方式滚动。

我认为它会被浏览器解释为鼠标滚轮，所以我设置了一个 onmousewheel 事件，但这似乎根本没有捕获它。作为记录，我正在使用 Firefox 25.0.1 进行测试。

有什么方法可以捕获轨迹包滚动，最好没有外部库？我试图让它尽可能独立和轻量级，但如果我绝对需要，我想我可以使用 jQuery 及其鼠标滚轮扩展......


一些浏览器使用onwheel事件而不是onmousewheel。因此，监听这两个事件通常是个好主意。

看到这个MDN 文章 https://developer.mozilla.org/en-US/docs/Web/API/Element.onwheel了解更多关于onwheel.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

scroll

JS 中的触摸板滚动检测，无库 的相关文章

随机推荐

  • 识别 Windows 版本

    我正在编写一个打印出详细 Windows 版本信息的函数 输出可能是这样的元组 32bit XP Professional SP3 English 它将支持 Windows XP 及更高版本 我一直坚持获取 Windows 版本 例如 专业

  • 使用 Flask 时在 Python 中实现持久数据库连接的最佳实践

    我的问题是关于在生产环境或其他关注性能的环境中使用 Flask 时处理数据库连接的推荐方法 在 Flask 中 g 对象可用于存储内容 并且可以将打开的数据库连接放置在那里 以允许应用程序在同一请求期间的后续数据库查询中重用它们 但是 g

  • 如何使用 NavigationStack 和 SwiftUI 发送额外数据？

    我有三个viewsA B 和 C 用户可以从 A 导航到 B 也可以从 A 导航到 C 用户可以从 B 导航到 C 现在我想区分用户是从 A 到 C 还是从 B 到 C 所以我在寻找如何在 NavigationStack 中传递额外的数据

  • 如何在mvc 4中使用多重选择？

    我想使用多重选择Chosen http harvesthq github com chosen 我有类似的技能模型 public class Skill public int Id get set public string Name ge

  • MySQL 中复制一条记录

    我有一个表 我想复制表中的特定行 我知道这不是最好的方法 但我们正在寻找快速解决方案 这比我最初想象的要难 我需要做的就是将整个记录复制到 MySql 中自动增量表中的新记录 而不需要指定每个字段 这是因为该表将来可能会发生变化 并且可能会

  • 在 sidekiq 上配置 redis 身份验证

    我想我错过了一些东西 因为我在文档中找不到如何编写 redis 实例的用户名和密码以与 sidekiq 一起使用 有没有办法做到这一点 或者是通过 ENV 变量 Sidekiq 将无法识别的 Redis 选项直接传递给 Redis 驱动程序

  • 在 r 中使用 reprex 包创建可重现的示例，其中正在读取本地文件

    我经常使用reprex reprex创建可重复的示例R代码以获得其他人的帮助以消除我的代码中的错误 通常 我使用数据集创建最小的示例 例如iris or mtcars而且效果很好 但我总是无法使用reprex任何时候我需要使用我的own数据

  • NestJS 无法解析 UsersModule 的依赖关系

    NestJS 无法解析 UsersModule 的依赖关系 错误 错误 Nest 无法解析 UsersModule 的依赖关系 请 验证 0 参数在当前上下文中是否可用 应用程序模块 ts Module imports ConfigModu

  • 从 SQL Server 中调用 Python 文件

    我的文件名中有 Python 脚本 C Python HL py 在此 Python 脚本中 有预测模型以及对 SQL 数据库中某些表的更新 我想将此文件称为 SQL 作业 我怎样才能做到这一点 这个问题不一样 如何在 SQL Server

  • 将泛型类转换为接口

    我在将泛型类转换为它正在实现的接口时遇到问题 我的代码是这样的 interface foo void foobar class bar foo public void foobar throw new NotImplementedExcep

  • 如何在 Rails Active Admin 中添加 Colorpicker？

    我想实现这个http www eyecon ro colorpicker about http www eyecon ro colorpicker about或活动管理表单之一中的任何其他颜色选择器 任何帮助表示赞赏 谢谢 GS 因为你想使

  • 从 Oracle Forms 调用 Microsoft Word 拼写检查时出现 Vista 焦点问题

    朋友们 在 Vista 上测试我们的 Oracle Forms 应用程序时 我发现了一个有趣的 挑战 应用程序可以调用 Microsoft Word 拼写检查器对字段执行拼写检查 调用时 用户将看到标准的 Microsoft Word 拼写

  • 我的绘图存在坐标/glortho 问题

    I have made a bit of a change to my code in the last couple of hours as everything was messy with my grid so I made it i

  • Qt Creator 中的按钮是否有隐藏属性？

    Qt Creator 属性托盘中是否有按钮的隐藏属性 我想找到一个 但找不到 我需要禁用一些按钮并隐藏一些按钮 我应该使用属性托盘还是在构造函数中进行 稍后在用户事件中 它们将被启用并显示 有些控件在调色板上具有 可见性 属性 有些则没有

  • 在 iPad 上使用 OpenCV 避免碰撞

    我正在开展一个项目 需要使用 OpenCV 实现碰撞避免 这是在 iOS 上完成的 iOS 5 及以上版本即可 项目目标 这个想法是将 iPad 安装在汽车仪表板上并启动应用程序 应用程序应该从相机中抓取帧并进行处理 以检测汽车是否会与任何

  • ControllerBase(asp.net mvc) 中的 HttpContext.Current.User 为 null

    我有一个ControllerBaseASP NET MVC 应用程序中的类 其他控制器继承自ControllerBase 我想访问HttpContext User Identity Name but HttpContext is null

  • C# 中具有丰富类型的常量正确性

    来自 C 背景并试图学习 C 我遇到的最令人沮丧的语言遗漏之一相当于const关键词 因此 我一直在尝试确定一种可用于在 C 中实现 const 正确性的模式 这个答案 https stackoverflow com a 114809 54

  • 在 Windows 10 中安装 laravel 安装程序时出现错误

    我正在使用 Windows 10 并且composer已安装 当我尝试安装时laravel使用此命令全局安装程序 composer global require laravel installer Composer Downloader T

  • Couchbase 多个钥匙

    I presume a simple question I have the following data 我想搜索 ID gt 2 但 30 的所有行 我使用过以下版本 startkey 2 null 甚至类似的东西startkey 2

  • JS 中的触摸板滚动检测，无库

    我正在制作自己的小型 Javascript 库 可以轻松地将您网站 和我的网站 的默认滚动条替换为自定义滚动条 其中一部分意味着为 BODY 元素提供 overflow hidden 样式来隐藏正常的滚动条 但是 这会阻止除代码中完成的滚动

热门标签