当前位置: 首页 > 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 });
}

相关文章:

  • 算法第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年气候持续大风,消纳减少,如何保收益?东润能源整体解决方案持续保收益保增长
  • 零碳办会新范式!第十届国际贸易发展论坛——生物能源和可持续发展专场,在京举办
  • 哈尔滨网站建设服务公司/合肥seo外包平台
  • 怎么做网站注册的网页/江苏seo团队
  • 哪里有做网站app的/seo搜索优化技术
  • 怎么做支付网站/seo主要做什么
  • 泉州专业建站/新闻稿营销
  • 响应式网站代码/上海sem