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 }
  );
}
相关推荐
神也佑我橙橙14 小时前
windows/linux 模拟鼠标键盘输入
计算机外设
眸生1 天前
自制操作系统day7(获取按键编码、FIFO缓冲区、鼠标、键盘控制器(Keyboard Controller, KBC)、PS/2协议)
c语言·汇编·计算机外设·操作系统·计算机组成原理·寄存器
眸生2 天前
自制操作系统day8 (鼠标数据取得、通往32位模式之路、A20GATE、切换到保护模式、控制寄存器cr0-cr4以及cr8、ALIGNB)
c语言·汇编·计算机外设·操作系统·i/o外设
plmm烟酒僧2 天前
在 Ubuntu 下通过 C APP程序实现串口发送数据并接收返回数据
linux·c语言·ubuntu·计算机外设·串口·ch340
LitchiCheng2 天前
RISC-V 开发板 MUSE Pi Pro V2D图像加速器测试,踩坑介绍
计算机外设·risc-v
yayapoi~4 天前
三键标准、多键usb鼠标数据格式
计算机外设
shandianchengzi4 天前
【工具】Windows|外接的显示器怎么用软件调亮度(Brightness Slider)
windows·计算机外设·显示器·工具·软件
How_doyou_do5 天前
显示器无法接受键盘/鼠标问题解决
计算机外设
四荒八极5 天前
配置WebStorm键盘快捷键
ide·计算机外设·webstorm