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 }
  );
}
相关推荐
flysh0521 小时前
pyAutoGUI 模块主要功能介绍-(1)鼠标功能
python·计算机外设·鼠标控制
Winter_Sun灬1 天前
普通键盘在MacOS上如何使用快捷键
macos·计算机外设·键盘
瞬间记忆1 天前
如何使显示器在笔记本盖上盖子时还能正常运转
计算机外设
dujunqiu2 天前
S32K328上芯片内部RTC的使用和唤醒配置
mcu·计算机外设
嵌入式牛马在努力帮老板娶老婆3 天前
十三、STM32----LCD屏驱动
stm32·嵌入式硬件·计算机外设
MingYue_SSS3 天前
键盘上面有F3,四,R,F,V,按下没有反应,维修记录
嵌入式硬件·计算机外设·解决办法
KWTXX3 天前
单片机键盘接口程序设计(汇编语言)
单片机·计算机外设·nosql
全栈技术负责人5 天前
移动端富文本markdown中表格滚动与页面滚动的冲突处理:Touch 事件 + 鼠标滚轮精确控制方案
前端·javascript·计算机外设
铉铉这波能秀5 天前
解决Mac电脑连接蓝牙鼠标的延迟问题
macos·计算机外设·鼠标