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 }
  );
}
相关推荐
zfysis14 小时前
键盘第一下无反应
计算机外设
Allen Bright11 天前
【JS-4.4-键盘常用事件】深入理解DOM键盘事件:提升用户交互体验的关键
javascript·计算机外设·交互
小天源11 天前
鼠标自动录制软件下载及使用
自动化测试·自动化·计算机外设·mouse recorder·鼠标录制·鼠标宏
小池先生11 天前
罗技键盘k380 fn按键问题 按f12不能直接打开调试,需要fn+f12
计算机外设
ai.Neo13 天前
(双模第2期)基于Nordic nRF52832的蓝牙键盘主控设计全流程详解
计算机外设
一眼青苔14 天前
vs code 如何开启按住ctrl和滚动鼠标来缩放字体大小
计算机外设
木尧大兄弟15 天前
Cubase 通过 MIDIPLUS MIDI 键盘进行走带控制的设置方法
计算机外设
老猿阿浪16 天前
React Native WebView键盘难题:如何让输入框不被键盘遮挡?
react native·react.js·计算机外设
西北丰16 天前
键盘 AK35I Pro V2 分析
单片机·嵌入式硬件·计算机外设
『六哥』17 天前
计算机硬件——外设、其他部件
计算机外设·电脑