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 }
  );
}
相关推荐
jllws16 天前
键盘实现输入的思路
计算机外设
不脱发的程序猿8 天前
STM32制作单手鼠标键盘
stm32·嵌入式硬件·计算机外设·usb·qmk
AntsData10 天前
用 12K+ 条亚马逊评论信号,定位机械键盘下一版该改什么
java·大数据·计算机外设
时间的情敌10 天前
Vue3 + Cesium 鼠标交互绘制多边形 / 线(贴地绘制,动态预览,Entity 实现)
计算机外设
小幂同学11 天前
鼠标左右键自动点击怎么设置?单击、双击与宏录制说明
计算机外设·鼠标连点器·连点器·点击器·自动点击器
摩尔芯创11 天前
一期一会 | 什么是抬头显示器(HUD)?
计算机外设
苏州福兰克11 天前
运行裸眼3D显示器对电脑显卡配置有什么要求?
3d·计算机外设·电脑
巧手打字通-一起来打字11 天前
怎么才能科学快速的学会电脑26键盘打字?
计算机外设·电脑·键盘
苏州福兰克14 天前
没有3D内容,裸眼3D显示器还能用吗?
3d·计算机外设
豪气的程序猿14 天前
Windows 11 外接键盘偶尔漏键?用键盘小鹿练习前先做双设备对照
计算机外设·电脑