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 }
  );
}
相关推荐
开开心心_Every5 小时前
实现鼠标键盘动作录制与重复播放的工具
微信·jupyter·pycharm·pdf·计算机外设·word·excel
科技每日热闻16 小时前
一屏总览!飞利浦超宽商用显示器49B2U5900CH,定义后期剪辑创作体验
计算机外设
智塑未来1 天前
2026年电竞鼠标十强解析:镁合金如何重塑竞技体验
计算机外设
励志不掉头发的内向程序员2 天前
LibreCAD 2D架构】从鼠标点击到屏幕像素:LibreCAD绘图架构全链路解析之鼠标事件与RS_ActionDrawLine
c++·qt·学习·架构·计算机外设
不想看见4043 天前
一次关于“鼠标是不是串口”的追问:从USB协议到CAN总线
c++·qt·计算机外设
驱动小百科3 天前
雷柏鼠标驱动下载教程:雷柏鼠标驱动怎么安装
计算机外设·雷柏鼠标驱动下载·雷柏鼠标驱动·雷柏鼠标驱动安装·雷柏鼠标驱动官网
playboy1344 天前
NAS不能访问共享文件夹数据恢复
大数据·计算机外设
卢锡荣4 天前
一线通桌面显示器优选芯|乐得瑞 LDR6021Q
计算机外设
每周报刊6 天前
竞速座舱级视界:爱攻 AGP497UCZD 超宽 QDOLED 显示器解析
数据结构·游戏·计算机外设
小幂同学8 天前
笔记本触控板能用鼠标连点器吗?快捷键与位置问题解析
计算机外设·鼠标连点器·连点器