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 }
  );
}
相关推荐
Tisfy1 天前
MacOS:首次外接键盘初始化设置(Option/Command互换、左上角·~而非§±)
macos·计算机外设
qq_171538852 天前
两条赛道,同一个未来:计算机科学与技术 VS 软件工程
大数据·计算机外设·软件工程
集芯微电科技有限公司19 天前
四通道2A输出集成功率电感降压模块专为紧凑型方案设计
人工智能·单片机·嵌入式硬件·生成对抗网络·计算机外设
lichong95119 天前
让AI自己用电脑!Cua:后台操作鼠标键盘,Mac/Windows/Linux全支持
人工智能·macos·ai·计算机外设·agent·提示词
Saniffer_SH20 天前
【高清视频】Gen6 服务器还没到,Gen6 SSD 怎么测?Emily 现场演示三种测试环境
人工智能·驱动开发·测试工具·缓存·fpga开发·计算机外设·压力测试
阿泽·黑核20 天前
05 keyflow 扩展设计方案:矩阵键盘/组合键/事件队列/中断驱动
线性代数·矩阵·计算机外设·嵌入式·agent·vibe coding
科技每日热闻20 天前
618 AI显示器选购指南!爱攻AGON AI定制芯片电竞显示器AG277UX,适合哪些玩家?
人工智能·科技·游戏·计算机外设
科技每日热闻20 天前
舒视蓝4.0 AI版!EVNIA弈威海王星系列护眼电竞显示器27M4P5501U来袭
人工智能·科技·游戏·计算机外设
开开心心_Every21 天前
界面干净的开源免费电视浏览器
人工智能·科技·智能手机·计算机外设·rabbitmq·语音识别·etcd
智塑未来23 天前
2026高性价比商用护眼显示器调研:飞利浦护眼技术与售后体系深度解析
计算机外设