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