当前位置: 首页 > article >正文

Ctrl+鼠标滚动阻止页面放大/缩小

项目场景:

提示:这里简述项目相关背景:

一般在我们做大屏的时候,不希望Ctrl+鼠标上下滚动的时候页面会放大/缩小,那么在有时候,又不希望影响到别的页面,比如说这个大屏是在另一个管理后台中,那么,在管理后台Ctrl+鼠标上下滚动是可以缩放的,但是,跳转到大屏时候是不希望缩放的。

这时候我们可以将阻止缩放函数放在大屏的页面中


问题描述

提示:这里描述项目中遇到的问题:


解决方案:

提示:这里填写该问题的具体解决方案:

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 });
}

http://www.lryc.cn/news/2386142.html

相关文章:

  • 开发积累总结
  • C++虚函数与类对象模型深度解析
  • 3d世界坐标系转屏幕坐标系
  • 【2025】基于Springboot + vue + 协同过滤算法实现的旅游推荐系统
  • AI数据治理破局的战略重构
  • QT6安装与概念介绍
  • Python包管理工具uv 国内源配置
  • ABP VNext + Webhook:订阅与异步回调
  • Docker(二):开机自启动与基础配置、镜像加速器优化与疑难排查指南
  • Lua基础语法
  • 2025年渗透测试面试题总结-匿名[实习]安全工程师(安全厂商)(题目+回答)
  • 【node.js】实战项目
  • 从AD9361 到 ADSY1100 ,中间的迭代产品历史
  • 免费插件集-illustrator插件-Ai插件-查找选中颜色与pantone中匹配颜色
  • redis集合类型
  • [爬虫实战] 爬微博图片:xpath的具体运用
  • MySQL中简单的操作
  • NNG和DDS
  • 防震基座在半导体晶圆制造设备抛光机详细应用案例-江苏泊苏系统集成有限公司
  • 框架开发与原生开发的权衡:React案例分析(原生JavaScript)
  • Lua5.4.2常用API整理记录
  • Python打卡训练营学习记录Day36
  • ### Mac电脑推送文件至Gitee仓库步骤详解
  • 官方SDK停更后的选择:开源维护的Bugly Unity SDK
  • 什么是智能体agent?
  • 【多线程】Java 实现方式及其优缺点
  • Obsidian 数据可视化深度实践:用 DataviewJS 与 Charts 插件构建智能日报系统
  • Three.js 海量模型加载性能优化指南
  • 6.4.3_有向无环图描述表达式
  • 力扣第157场双周赛