Ctrl+鼠标滚动阻止页面放大/缩小

项目场景:

提示:这里简述项目相关背景:

一般在我们做大屏的时候,不希望Ctrl+鼠标上下滚动的时候页面会放大/缩小,那么在有时候,又不希望影响到别的页面,比如说这个大屏是在另一个管理后台中,那么,在管理后台Ctrl+鼠标上下滚动是可以缩放的,但是,跳转到大屏时候是不希望缩放的。

这时候我们可以将阻止缩放函数放在大屏的页面中


问题描述

提示:这里描述项目中遇到的问题:


解决方案:

提示:这里填写该问题的具体解决方案:

javascript 复制代码
onMounted(() => {
  getData();// 初始化的时候请求数据
  preMouse();//初始化的时候阻止缩放
});
onBeforeUnmount(()=>{
  window.removeEventListener('wheel', preMouse)
})


// 阻止 ctrl+鼠标上下滚动 页面元素改变大小 -阻止缩放
const preMouse=()=>{
  window.addEventListener('wheel', (event:any) => {
    if ((event.wheelDelta && event.ctrlKey) || event.detail) {
      event.preventDefault();
    }
    if (event.ctrlKey) {
    // ctrl + 鼠标滚轮 的行为
    } else if (event.shiftKey) {
    // shift + 鼠标滚轮 的行为
    } 
  }, 
  { capture: false, passive: false }
  );
}
相关推荐
开开心心_Every4 小时前
界面干净的开源免费电视浏览器
人工智能·科技·智能手机·计算机外设·rabbitmq·语音识别·etcd
智塑未来2 天前
2026高性价比商用护眼显示器调研:飞利浦护眼技术与售后体系深度解析
计算机外设
移远通信2 天前
显示器-调试
单片机·嵌入式硬件·计算机外设
Legendary_0082 天前
LDR6020P:iPad 一体式皮套键盘 OTG 应用的核心引擎
ios·计算机外设·ipad
梦奇不是胖猫3 天前
Marvis保姆级教程:一个帮你点鼠标的 AI 管家
人工智能·计算机外设
YJlio3 天前
《Sysinternals实战指南》16.5 Ctrl2Cap 工具详解:把 Caps Lock 变成 Ctrl 的键盘改造与回退方法
linux·运维·服务器·网络·python·学习·计算机外设
七月稻草人3 天前
多人在线会议如何同时操作电脑?支持多鼠标协同的软件盘点
计算机外设
石头城的小石头3 天前
【从0到1的鼠标位置显示记录器,基于python环境pycharm下编译实施,最终打包为exe,欢迎交流】
python·目标跟踪·pycharm·计算机外设·鼠标
努力进修3 天前
拒绝远程协作“抢鼠标”!ToDesk多人协作深度实测:底层逻辑与实战技巧全解析
计算机外设·todesk
永远的WEB小白3 天前
Mouse Parallax 鼠标视差跟随,视觉差
计算机外设