不是什么很难的东西,权且做个记录。

首先说下背景,目前的项目中,需要同时绑定 wheel 和 scroll 事件。

绑定 wheel,目的是开发 ctrl + wheel 缩放页面功能,此功能与浏览器本身的冲突,因此需要禁用滚轮原生功能,示意代码:

window.addEventListener('wheel', function(e){
e.preventDefault();
}, {passive: false});

此时遇到个问题,禁用 wheel 的同时,会将 scroll 事件也同时禁用,这个蛋疼的问题以前确实一直没注意到,最终一行代码搞定:

window.addEventListener('wheel', function(e){
if(e.ctrlKey === true){
e.preventDefault();
}
}, {passive: false});

  

测试一圈后发现,其他主流浏览器都 ok,唯独在搜狗浏览器中,无论如何禁用都没用。

观察了百度地图、蓝湖等成熟产品,也发现了同样的问题,此时的搜狗浏览器版本是 8.5.7,但在同事的 8.5.10 中却并没有这个问题。

到搜狗浏览器论坛中,搜索 “缩放” 关键字,发现也有用户跟我遇到的问题一样,但官方未回复。

至此,基本可以确定是搜狗浏览器的兼容问题,最终也确实如所想,升级到 8.5.10后,本问题未复现。

另外放一个百度过程中,找到的一种解决方案:

document.body.style.zoom = 'reset'

使用这个属性,可以让浏览器缩放时,缩放的数字变化,但页面实际不进行缩放,未经过大量浏览器测试,真实效用不保证。

一个 passive 引发的bug的更多相关文章

  1. 一个排序引发的BUG

    你好呀,我是why. 前两天在 Git 上闲逛的时候又不知不觉逛到 Dubbo 那里去了. 看了一下最近一个月的数据,社区活跃度还是很高的: 然后看了一下最新的 issue,大家提问都很积极. 其中看 ...

  2. 一个空格引发的bug

    好久没写博客了. 我们的一个项目用的thinkphp框架,当在debug模式下面运行很正常,但切换到生产模式时,刷新页面第一次可以正常显示,刷新第二次会出现错误如下: Fatal error: Cal ...

  3. 一个request引发的bug

    有很多错误由于需要是多线程是才会发生,导致经常在开发时很难发现, import java.lang.reflect.ParameterizedType; import java.util.List; ...

  4. 一个字体引发的bug

    delphi 7 中默认字体样式为‘MS Sans Serif’,一般情况下子级控件会继承父级一些属性,其中包括字体(包括字体大小,字体样式,颜色等)属性.如果动态创建控件且需要修改字体颜色或者大小时 ...

  5. Spring 循环引用(一)一个循环依赖引发的 BUG

    Spring 循环引用(一)一个循环依赖引发的 BUG Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring 循环 ...

  6. 由一个emoji引发的思考

    由一个emoji引发的思考 从毕业以来,基本就一直在做移动端,但是一直就关于移动端的开发,各种适配问题的解决,在日常搬砖中处理了就过了,也没有把东西都沉淀下来,觉得甚是寒颜.现就一个小bug,让我们来 ...

  7. 安卓微信overflow-x overflow-y引发的bug

    今天xgo文章图片页上线用微信扫页面发现一个bug,页面可以双击放大缩小. 找了半天原因,发现是图片描述设置了overflow-y引发的bug. 建议在微信场景里满屏显示不能滚动的页面里慎用overf ...

  8. QByteArray引发的bug

    QByteArray引发的bug 在接收UDP数据的函数里,有如下代码片段 if(0x10 == data.size() && 0xCA == (unsigned char)data. ...

  9. PHP 中一个 False 引发的问题,差点让公司损失一百万

    PHP 中一个 False 引发的问题,差点让公司损失一百万 一.场景描述 上周我一个在金融公司的同学,他在线上写一个 Bug,差点造成公司损失百万.幸好他及时发现了这个问题并修复了.这是一个由 PH ...

随机推荐

  1. PCL的学习必要性、重要性、意义及最初——持续修改中

    为什么学习PCL:图像描述:各种维度图像的逻辑描述形式  ^-^ 且点云库是机器人学领域的必备基础库,ICRA和IROS的计算机视觉相关一般都使用了PCL库,PCL库也成为ROS的基础部分,与机器人操 ...

  2. (转)Arcgis for JS之对象捕捉

    http://blog.csdn.net/gisshixisheng/article/details/44098615 在web操作,如绘制或者测量的时候,为了精确,需要捕捉到某一图层的对象,在此,讲 ...

  3. 进行https通信时服务器端下发的是一个证书链

    进行https通信时服务器端下发的是一个证书链,否则无法验证证书的有效性.

  4. AOP注解形式 整合memcache

    1.首先自定义注解 :添加缓存 @Target(ElementType.METHOD)@Retention(RetentionPolicy.RUNTIME)@Documented@Inheritedp ...

  5. 3D模型在UI上显示的方法(Unity)

    方法:使用RawImage通过Render Texter将摄像机下的物体渲染纹理记录并显示在RawImage上面 具体实现:新建一个模型(Cube),新建一个摄像机,将Clear Flags设置为So ...

  6. SQL中IS NOT NULL与!=NULL的区别

    平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...

  7. Linux—Ubuntu14.0.5安装MySQL

    1.更新资援列表 sudo apt-get update 2.安装mysql的操作命令(下一步选中“Y”) sudo apt-get install mysql-server 3.输入MySQLroo ...

  8. 教你如何检查一个函数是否为JavaScript运行时环境内建函数

    在开发过程中,对于某些API在现有的JavaScript运行时环境不支持的时候,我们大都会采用加入polyfill来解决这个问题.但有些时候我们可能需要知道现在某个API到底是否为运行时环境所原生支持 ...

  9. node源码详解(三)

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource3 本博客同步在https://cnodejs.o ...

  10. qsort快速排序

    C库函数qsort七种使用方法示例 七种qsort排序方法<本文中排序都是采用的从小到大排序> 一.对int类型数组排序C++ / C 代码 int num[100]; Sample: i ...