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 }
  );
}
相关推荐
Jwest202111 小时前
佳维视工业显示器在健康体检一体机中的应用
计算机外设
weixin_402278451 天前
解决打开vscode编辑器ctrl+鼠标左键不能跳转定义问题 环境C++
vscode·编辑器·计算机外设
开开心心就好1 天前
专为视障人士设计的免费辅助工具
windows·计算机视觉·计算机外设·excel·散列表·推荐算法·csdn开发云
天下财经热2 天前
2026编程显示器推荐:明基RD270Q的2K144Hz有多实用?
计算机外设
南棱笑笑生2 天前
20260427给万象奥科的开发板HD-RK3576-PI适配瑞芯微原厂的Android14时【增加鼠标右键返回】
计算机外设·rockchip
维吉斯蔡2 天前
【计算机是怎样跑起来的】(二)CPU、内存、I/O 和总线到底是什么?
笔记·stm32·单片机·物联网·计算机外设·51单片机
编程之升级打怪2 天前
联想电脑进入BIOS的方式
计算机外设
Lanren的编程日记3 天前
Flutter 鸿蒙应用无障碍功能实战:语义化标签+屏幕阅读器+键盘导航,全方位提升应用可用性
flutter·华为·计算机外设·harmonyos
Legendary_0084 天前
Type-C 赋能传统显示器:一线通联,LDR6020 重构显示互联体验
c语言·计算机外设·pd芯片
爱上好庆祝4 天前
学习js的第三天
前端·css·人工智能·学习·计算机外设·js