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 }
  );
}
相关推荐
呉師傅7 小时前
国产麒麟系统卡启动项或图标如何解决
运维·网络·windows·计算机外设·电脑
触想工业平板电脑一体机8 小时前
【触想智能】工业触控一体机在船舶海运设备上应用的特点和具体场景分析
android·网络·计算机外设·电脑·智能电视
企鹅侠客1 天前
定时坐标鼠标点击器
计算机外设·定时点击·鼠标点击
TESmart碲视1 天前
M4芯片MacBook支持多显示器吗?mac如何与KVM切换器使用。
macos·计算机外设·mst·kvm切换器·双屏kvm切换器
jmu-pfm3 天前
联想拯救者Y7000P遇到键盘失灵USB接口失效问题
计算机外设
斌蔚司李3 天前
外接显示器无法使用键盘/鼠标问题解决
计算机外设
电脑小管家3 天前
DirectX报错怎么办?快速修复游戏和软件崩溃问题
windows·驱动开发·microsoft·计算机外设·电脑
极客先躯3 天前
如何修复 ECharts 鼠标交互(如 hover、点击)位置错位的问题
计算机外设·echarts·交互
uuleaf4 天前
打字速度练习:零基础14天提升到80CPM键盘打字指南
计算机外设