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

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.xdnf.cn/news/8216.html

相关文章:

  • QFileDialog::getSaveFileName导致系统崩溃
  • Go语言gopacket库的HTTP协议分析工具实现
  • 学习人工智能:从0到1的破局指南与职业成长路径
  • vue3+vue-flow实现拖拽矩形框,端点连线,自定义宽高
  • BGP为什么要配置对等IP?
  • PyInstaller入门
  • 如何看navicat数据库连接的密码
  • C++效率掌握之STL库:unordered_map unordered_set底层剖析
  • JavaScript【8】异步请求与本地存储
  • 巢票赛演协议逆向分析
  • 建设工程窝工、停工损失案件庭审发问提纲
  • [Dify] 在Dify中优雅处理本地部署LLM的Token超限问题
  • TransMorph:用于无监督医学图像配准的变压器
  • 网络编程中的 Protobuf 和 JsonCpp 全面解析
  • 视频监控管理平台EasyCVR结合AI分析技术构建高空抛物智能监控系统,筑牢社区安全防护网
  • Dify-4:API 后端架构
  • C#学习11——集合
  • 电机试验平台:实现高效精密测试的关键工具
  • 蓝桥杯 10. 安全序列
  • 今日行情明日机会——20250522
  • Linux 部署 RocketMQ
  • 基于江协标准库所出现的定时器5678以及串口45等无法使用的问题解析
  • 写实交互数字人在AI招聘中的应用方案
  • UE5 Va Res发送请求、处理请求、json使用
  • React 如何封装一个可复用的 Ant Design 组件
  • 学习日记-day13-5.22
  • Dockers Compose常用指令介绍
  • matlab实现无线通信组
  • PG Craft靶机复现 宏macro攻击
  • 第33节:迁移学习与模型微调策略