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 }
  );
}
相关推荐
春日见13 小时前
win11 分屏设置
java·开发语言·驱动开发·docker·单例模式·计算机外设
TESmart碲视18 小时前
如何用一套键盘鼠标切换多个输入设备?TESmart KVM热键工作原理深度解析.一份涵盖设计原理、使用方法与兼容性的完整技术指南
游戏·macos·计算机外设·kvm切换器·双屏kvm切换器
JosieBook19 小时前
【Vue】13 Vue技术—— Vue 中的键盘事件处理详解
javascript·vue.js·计算机外设
Hody912 天前
【XR开发系列】与玩家交互 - 用键盘控制小球移动
计算机外设·交互
一起养小猫4 天前
Flutter for OpenHarmony 实战:双控制系统实现(按钮+键盘)
android·flutter·计算机外设·harmonyos
cong*4 天前
搜狗输入法云计算代理导致Windows 10鼠标指针不停转圈的解决方案
windows·计算机外设
永霖光电_UVLED5 天前
光学计量工具瞄准 AR/VR、显示器和光源
计算机外设·ar·vr
SmartRadio5 天前
基于泰山派PiKVM的多电脑KVM共享方案(HDMI采集+虚拟USB键鼠+无缝切换+剪贴板/文件共享)
网络·lora·计算机外设·电脑
_codemonster5 天前
两台以上的电脑共用一套键盘鼠标(windows+Ubuntu)
windows·计算机外设·电脑
SmartRadio6 天前
ESP32-S3实现KVM远控+云玩功能 完整方案
运维·python·计算机外设·esp32·kvm·云玩