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

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.dtcms.com/a/206080.html

相关文章:

  • 算法第26天 | 贪心算法、455.分发饼干、376. 摆动序列、 53. 最大子序和
  • LeetCode:贪心算法
  • 贪心算法——分数背包问题
  • 元宇宙赛道新势力:芯谷产业园创新业务如何重构产业格局
  • 页面置换算法概述
  • CaDDN- Categorical Depth Distribution Network for Monocular 3D Object Detection
  • PYTORCH_CUDA_ALLOC_CONF基本原理和具体示例
  • DDR5和LPDDR5的CA采样时刻对比,含DDR5的1N/2N模式
  • redis搭建最小的集群,3主3从
  • 华为昇腾开发——多模型资源管理(C++)
  • flutter dart class语法说明、示例
  • 微信小程序 隐私协议弹窗授权
  • 关于数据仓库、数据湖、数据平台、数据中台和湖仓一体的概念和区别
  • 视频文件损坏怎么修复?4款专业视频修复工具推荐
  • 大模型应对大风等极端天气的卓越效果及其在能源预测中的特殊价值
  • 即将截稿|快速出版:IEEE 2025先进能源系统和电力电子国际会议(AESPE2025)
  • 广州能源所重大突破:闪蒸焦耳加热助力粉煤灰 / 赤泥中关键金属低碳回收
  • 数字孪生技术如何重塑能源产业?
  • 2025年气候持续大风,消纳减少,如何保收益?东润能源整体解决方案持续保收益保增长
  • 零碳办会新范式!第十届国际贸易发展论坛——生物能源和可持续发展专场,在京举办
  • SpringAI 大模型应用开发篇-SpringAI 项目的新手入门知识
  • Femap许可证兼容性问题
  • 并发编程 之 Java内存模型、AQS详解:AQS设计思想、Unsafe
  • MySQL与Redis数据同步实践与优化
  • B2160 病人排队
  • 戴尔电脑怎么开启vt_戴尔电脑新旧bios开启vt虚拟化图文教程
  • 【图像处理入门】1. 数字图像的本质:从像素到色彩模型
  • HarmonyOS 鸿蒙应用开发基础:父组件和子组件的通信方法总结
  • 设计模式-工厂模式和策略模式
  • 选择第三方软件检测机构做软件测试的三大原因