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 }
  );
}
相关推荐
OBOO鸥柏商用液晶显示厂家14 小时前
OBOO鸥柏丨75寸/86平板企业办公会议触控一体机核心国产化品牌招投标参数
计算机外设·电脑·大屏端·信息发布系统·会议一体机
python-行者17 小时前
akamai鼠标轨迹
爬虫·python·计算机外设·akamai
大Mod_abfun3 天前
多显示器窗口分布规律探索(包括WorkerW的区域)
计算机外设·显示器布局·桌面背景层·workerw
猎板PCB 邹亮7 天前
猎板PCB:专业键盘PCB板解决方案供应商
计算机外设·键盘·pcb工艺
点灯小铭7 天前
基于STM32单片机的无线鼠标设计
stm32·单片机·计算机外设·毕业设计·课程设计
Jwest20218 天前
佳维视高亮度工业显示器,强光环境清晰可见
计算机外设
呉師傅10 天前
奔图P2500NW打印机手机无线连接方法
运维·网络·windows·智能手机·计算机外设·电脑
诚实可靠王大锤11 天前
使用MatterJs物理2D引擎实现重力和鼠标交互等功能,有点击事件(盒子堆叠效果)
javascript·计算机外设·交互
FreeDw资源库12 天前
Windows驱动更新下载工具,电脑硬件设备驱动程序自动安装下载更新,可备份还原!键盘鼠标声卡网卡显卡主板硬盘驱动都可以下载,免费使用的神器!
windows·计算机外设·驱动更新·驱动下载
qq_5469372712 天前
轻量级鼠标右键增强工具 MousePlus
计算机外设