草庐IT

javascript - 处理 Microsoft Edge 浏览器中奇怪的倒转轮事件 deltaX?

coder 2024-05-10 原文

今天我在 Microsoft 的 Edge 浏览器中发现了一些非常奇怪的行为,其中 deltaX wheel events 的值显然是颠倒了!这特别令人惊讶,因为这与我测试过的所有其他浏览器都不一致,包括返回预期值的 Internet Explorer 11。

实际查看此问题非常简单,只需运行以下代码,并使用鼠标滚轮或触控板即可。

window.addEventListener('wheel', function(e) {
    console.log(e.deltaX, e.deltaY);
});

为了您的方便,我创建了一个整页示例(片段对此很棘手):

Fullpage Working Example

在 Edge、IE 和其他浏览器中,向下滚动给出正值,向上滚动给出负值。但是,在 Edge 中,向左旋转给出正值,向右旋转给出负值,这与所有其他浏览器(包括 IE11 及以下版本)完全相反。

我也制作了一些 GIF 视频来展示这个问题,链接了文件大小。

问题:

为什么会这样,有没有解决浏览器兼容性问题的办法?有没有办法对此进行特征检测?此行为是错误,还是在某处记录?

The spec strongly suggests this is in-fact incorrect behavior :

If a user agent scrolls as the default action of the wheel event then the sign of the delta SHOULD be given by a right-hand coordinate system where positive X, Y, and Z axes are directed towards the right-most edge, bottom-most edge, and farthest depth (away from the user) of the document, respectively.

注意事项:

  • 我已经在 Windows 10 虚拟机和 native 笔记本电脑上对此进行了测试,两者的行为相同。
  • 我有理由相信这与“自然”/反向滚动无关(在测试的所有系统和 VM 主机上关闭,并且只发生在一个轴上)。
  • 附带说明一下,我不知道 deltaZ 是否被反转或什至支持开始,我缺少这样的输入设备。

错误报告:

I've reported the bug to Microsoft here.它已分配给某人,因此希望它会被修复。

最佳答案

虽然我们正在等待 Microsoft 的官方回应(希望以更新的形式解决问题),但我找到了一种方法来检查浏览器是否报告了错误反转的 deltaX

Edge 还添加了对 Chrome 中同样存在的非标准 wheelDeltaXwheelDeltaYwheelDelta 属性的支持。与 deltaX 不同,这些值是正确的,而是指实际的车轮变化而不是计算结果。虽然对它们的实际值没什么兴趣,但我们可以从中推断出正确的符号值。

在 Chrome 中,deltaXwheelDeltaX 正确地具有不同的符号值,因此当一个为负时,另一个为正。这意味着如果两个值都是负数或都是正数,则 deltaX 的签名不正确,因为它目前在 Edge 中。因此,我们可以使用此属性来检测错误反转的值并将其取消反转。

这是我为解决该问题而创建的包装函数。

function wheelDeltaX(e) {
    // Get the reported deltaX.
    var r = e.deltaX;

    // In Edge, the deltaX incorrectly matches wheelDeltaX sign.
    // If both value signs match then uninvert it.
    var wheelDeltaX;
    if (
        r &&
        (wheelDeltaX = e.wheelDeltaX) &&
        (
            (r < 0 && wheelDeltaX < 0) ||
            (r > 0 && wheelDeltaX > 0)
        )
    ) {
        r = -r;
    }

    return r;
}

只要 Edge 在希望解决问题时保留 wheelDeltaX 的正确签名,这应该是面向 future 的。

关于javascript - 处理 Microsoft Edge 浏览器中奇怪的倒转轮事件 deltaX?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38860192/

有关javascript - 处理 Microsoft Edge 浏览器中奇怪的倒转轮事件 deltaX?的更多相关文章

  1. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  2. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序,它接受一个给定的数组,然后将其显示为一个列表,我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了,但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情,但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem,我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点? 最佳答案 我不知道这是否是您正在寻找的,但也许您可以使用我的想法。由于我没有关于您要完成的工作

  3. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru

  4. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式? 最佳答案 您可以像这样为日期选择器提供额外的选项,而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义,我们在StackOverflow上找到一个类似的问题: https://s

  5. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是,当我单击“导入项目”按钮时,我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  8. Ruby-vips 图像处理库。有什么好的使用示例吗? - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道,是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接,我们将不胜感激!如果有ruby​​-

  9. ruby - Faye WebSocket,关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本,它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  10. ruby - 如何使用 Ruby HTTP::Net 处理 404 错误? - 2

    我正在尝试解析网页,但有时会收到404错误。这是我用来获取网页的代码:result=Net::HTTP::getURI.parse(URI.escape(url))如何测试result是否为404错误代码? 最佳答案 像这样重写你的代码:uri=URI.parse(url)result=Net::HTTP.start(uri.host,uri.port){|http|http.get(uri.path)}putsresult.codeputsresult.body这将打印状态码和正文。

随机推荐