js实现禁止页面缩放（ctrl+滚轮）

最新推荐文章于 2025-04-26 14:00:42 发布

今天也要加油ya

最新推荐文章于 2025-04-26 14:00:42 发布

阅读量963

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_61597234/article/details/138115158

版权

本文讲述了在项目开发中遇到的问题，即用户意外触发Ctrl+鼠标滚轮导致页面放大。文章介绍了如何通过监听鼠标滚轮事件并判断Ctrl键状态来防止这种意外缩放，提供了适用于不同浏览器的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：项目中存在与ctrl组合的快捷键，在一次偶然情况下不小心按住ctrl的同时碰到了鼠标滚轮，界面全部放大了，与预期效果完全不同，所以必须要禁用页面的缩放。

思路：1.要监听鼠标滚轮的事件; 2.要判断ctrl是否按中。3.判断两个是否同时使用

禁止滚轮缩放相关代码

  window.addEventListener('wheel', function (event) {
        if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault();
        }
  }, { passive: false });
  
  //firefox
  window.addEventListener('DOMMouseScroll', function (event) {
        if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault();
        }
  }, { passive: false })