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 }
  );
}
相关推荐
HezhezhiyuLe12 小时前
无界内嵌编辑器键盘事件失效
编辑器·计算机外设
酉鬼女又兒13 小时前
零基础入门计算机组成原理:控制器章节全考点汇总 | 寄存器 + 控制存储器 + 微指令
考研·职场和发展·计算机外设
沃普天科技13 小时前
USB显示器驱动板触摸收款机显示器收银机点菜机广告机
驱动开发·游戏·计算机外设·电脑·ar·音视频·硬件工程
卢锡荣1 天前
单芯通吃,盲插标杆 —— 乐得瑞 LDR6020,Type‑C 全场景互联 “智慧芯”
c语言·开发语言·计算机外设
feifeigo1231 天前
STM32矩阵键盘驱动(库函数版)实现
stm32·矩阵·计算机外设
是大强2 天前
定位桌面鼠标所在位置
计算机外设
龚礼鹏2 天前
优化android14低内存设备连接蓝牙键盘/鼠标后点击Disconnect断开蓝牙连接,页面卡顿(将1180ms优化到629ms)
计算机外设
shandianchengzi2 天前
【科普】安卓|安卓手机上如何简便实现Ctrl+Z(需要键盘或一台Windows电脑)
android·windows·智能手机·计算机外设·安卓·科普·记录
nashane2 天前
HarmonyOS 6学习:外接键盘CapsLock与长截图功能的实战调试与完整解决方案
学习·华为·计算机外设·harmonyos
ACP广源盛139246256732 天前
iOS 27 开放 AI 生态@ACP#小型化扩展黄金风口,IX8008全面超越 ASM2806,铸就嵌入式 AI 扩展核心
人工智能·嵌入式硬件·macos·ios·计算机外设·objective-c·cocoa