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 }
  );
}
相关推荐
呉師傅22 分钟前
佳能iR-ADV C5560复印机如何扫描文件到电脑
运维·网络·windows·计算机外设·电脑
.m2 天前
电脑主板亮红灯,开机显示器无显示的原因
windows·计算机外设
雾林小妖6 天前
win10连接鼠标自动关闭触摸板/win10关闭触摸板(笔记本)
计算机外设
大魔王(已黑化)6 天前
OpenCV 入门知识:图片展示、摄像头捕获、控制鼠标及其 Trackbar(滑动条)生成!
人工智能·opencv·计算机外设
TESmart碲视8 天前
一台显示器上如何快速切换两台电脑主机?
单片机·计算机外设·电脑·显示器·智能硬件
TESmart碲视8 天前
显示器如何突破 DisplayPort 1.4 的带宽限制,显示更高的分辨率刷新率
单片机·物联网·计算机外设·电脑·智能硬件
暴躁茹9 天前
Qt 将触摸事件转换为鼠标事件(Qt4和Qt5及以上版本)
开发语言·qt·计算机外设
短尾黑猫10 天前
【Fedora 42】Linux内核升级后,鼠标滚轮失灵,libinput的锅?
linux·运维·计算机外设
不讲废话的小白10 天前
解锁高效Excel技能:摆脱鼠标,快速编辑单元格
计算机外设·excel
南棱笑笑生11 天前
20250715给荣品RD-RK3588开发板刷Android14时打开USB鼠标
android·计算机外设