一个 passive 引发的bug

最新推荐文章于 2023-07-27 22:02:01 发布

weixin_34354945

最新推荐文章于 2023-07-27 22:02:01 发布

阅读量89

点赞数

原文链接：http://www.cnblogs.com/coderhero/p/10953825.html

版权

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

首先说下背景，目前的项目中，需要同时绑定 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'

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

转载于:https://www.cnblogs.com/coderhero/p/10953825.html

关注