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 }
  );
}
相关推荐
PhoenixAI81 天前
显示器共享多主机切换的软件解决方案
计算机外设·显示器
Z***G4792 天前
网络爬虫学习:借助DeepSeek完善爬虫软件,实现模拟鼠标右键点击,将链接另存为本地文件
爬虫·学习·计算机外设
啃火龙果的兔子3 天前
客户端频繁调用webview方法导致前端react副作用执行异常
计算机外设·交互
4***72133 天前
网络爬虫学习:借助DeepSeek完善爬虫软件,实现模拟鼠标右键点击,将链接另存为本地文件
爬虫·学习·计算机外设
S9037845974 天前
为什么取模在除数等于2^n的时候可以用按位与替代?
java·tomcat·计算机外设·hibernate
啃火龙果的兔子4 天前
webview焦点与软键盘键盘交互详解
计算机外设·交互
平凡灵感码头5 天前
经典按键扫描程序算法实现方式
单片机·矩阵·计算机外设
YUJIANYUE8 天前
Gemini一次成型龙跟随鼠标html5+canvas特效
前端·计算机外设·html5
微波炉...8 天前
Windows11,主板自带WIFI和蓝牙,蓝牙耳机、无线鼠标卡顿
计算机外设
科技每日热闻8 天前
影刃出鞘,酣战全场!EVNIA弈威双核电竞显示器27M2N6500L震撼登场!
科技·计算机外设