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 }
  );
}
相关推荐
石一峰6994 小时前
Linux INPUT 与 I2C 子系统关联
linux·运维·计算机外设
lemoncat86 小时前
双飞燕FG10鼠标摔落无响应|拆解修复|非广
计算机外设
梅梅9667 天前
一款mipi转lvds的lcd调试(LT8912B)
单片机·计算机外设·电脑·显示器·pd芯片
归零鸟15 天前
笔记本内屏黑屏,系统却说 “显示器一切正常“:一次 Intel PSR2 导致的 eDP 排查实录
计算机外设·电脑
Htr_15 天前
Cortex 使用指南:开源 API 知识层
前端·数据库·人工智能·重构·计算机外设
Htr_16 天前
Loqua 使用指南:让思维不再因键盘而减速
计算机外设
legendary_16319 天前
PD‑SINK芯片在无协议后端负载中的工程应用
c语言·开发语言·人工智能·智能手机·计算机外设
whysoft19 天前
创意新用法-把老磁带转录成mp3-第2部分
linux·计算机外设
yyt36304584121 天前
一次鼠标交互触发两次 Vue flushJobs:把高频交互从 VDOM 里拆出来
前端·vue.js·计算机外设
励志不掉头发的内向程序员22 天前
【LibreCAD 2D架构】从鼠标点击到图形创建:RS_ActionDrawLine交互流程与状态机解析
开发语言·c++·qt·学习·系统架构·计算机外设·交互