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.pswp.cn/news/906792.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL——复合查询表的内外连

目录 复合查询 回顾基本查询 多表查询 自连接 子查询 where 字句中使用子查询 单行子查询 多行子查询 多列子查询 from 字句中使用子查询 合并查询 实战OJ 查找所有员工入职时候的薪水情况 获取所有非manager的员工emp_no 获取所有员工当前的manager 表的内外…

聊一下CSS中的标准流,浮动流,文本流,文档流

在网络上关于CSS的文章中,有时候能听到“标准流”,“浮动流”,“定位流”等等词语,还有像“文档流”,“文本流”等词,这些流是什么意思?它们是CSS中的一些布局方案和特性。今天我们就来聊一下CS…

python训练营第33天

MLP神经网络的训练 知识点回顾: PyTorch和cuda的安装查看显卡信息的命令行命令(cmd中使用)cuda的检查简单神经网络的流程 数据预处理(归一化、转换成张量)模型的定义 继承nn.Module类定义每一个层定义前向传播流程 定义…

JDK21深度解密 Day 1:JDK21全景图:关键特性与升级价值

【JDK21深度解密 Day 1】JDK21全景图:关键特性与升级价值 引言 欢迎来到《JDK21深度解密:从新特性到生产实践的全栈指南》系列的第一天。今天我们将探讨JDK21的关键特性和升级价值。作为近5年最重要的LTS版本,JDK21不仅带来了性能上的巨大突…

[docker]更新容器中镜像版本

从peccore-dev仓库拉取镜像 docker pull 10.12.135.238:8060/peccore-dev/configserver:v1.13.45如果报错,请参考docker拉取镜像失败,添加仓库地址 修改/etc/CET/Common/peccore-docker-compose.yml文件中容器的版本,为刚刚拉取的版本 # 配置中心confi…

LVS原理详解及LVS负载均衡工作模式

什么是虚拟服务器(LVS) 虚拟服务器是高度可扩展且高度可用的服务器 构建在真实服务器集群上。服务器集群的架构 对最终用户完全透明,并且用户与 cluster 系统,就好像它只是一个高性能的虚拟 服务器。请考虑下图。 真实服务器和负…

上位机知识篇---keil IDE操作

文章目录 前言文件操作按键新建打开保存保存所有编辑操作按键撤销恢复复制粘贴剪切全选查找书签操作按键添加书签跳转到上一个书签跳转到下一个书签清空所有书签编译操作按键编译当前文件构建目标文件重新构建调试操作按键进入调试模式复位全速运行停止运行单步调试逐行调试跳出…

前端大文件上传性能优化实战:分片上传分析与实战

前端文件分片是大文件上传场景中的重要优化手段,其必要性和优势主要体现在以下几个方面: 一、必要性分析 1. 突破浏览器/服务器限制 浏览器限制:部分浏览器对单次上传文件大小有限制(如早期IE限制4GB) 服务器限制&a…

解决react-router-dom没有支持name命名使用的问题

1. 前言 react-router-dom 并不能像 vue 的route 那样给每个路由命名 name ,导致代码不能解耦路由路径与导航逻辑。 2. react-router 为什么没有支持? 很早之前官方 issue 中就有过很多讨论: 翻译过来,就是由于以下几个重要原…

Spring AI 之结构化输出转换器

截至 2024 年 2 月 5 日,旧的 OutputParser、BeanOutputParser、ListOutputParser 和 MapOutputParser 类已被弃用,取而代之的是新的 StructuredOutputConverter、BeanOutputConverter、ListOutputConverter 和 MapOutputConverter 实现类。后者可直接替换前者,并提供相同的…

MCP与AI模型的多语言支持:让人工智能更懂世界

MCP与AI模型的多语言支持:让人工智能更懂世界 在人工智能(AI)的时代,我们追求的不仅是强大的计算能力,更是让AI能够理解并使用不同语言,真正服务全球用户。而这背后,一个至关重要的技术就是 MCP(Multi-Context Processing,多上下文处理) ——一种旨在优化 AI 模型理…

【MySQL】 数据库基础数据类型

一、数据库简介 1.什么是数据库 数据库(Database)是一种用于存储、管理和检索数据的系统化集合。它允许用户以结构化的方式存储大量数据,并通过高效的方式访问和操作这些数据。数据库通常由数据库管理系统(DBMS)管理&…

NRM:快速切换 npm 镜像源的管理工具指南

🚀 NRM:快速切换 npm 镜像源的管理工具指南 🔍 什么是 NRM? NRM(Npm Registry Manager) 是一个用于管理 npm 镜像源的命令行工具。 它能帮助开发者 ⚡快速切换 不同的 npm 源(如官方源、淘宝源…

基于Java的话剧购票小程序【附源码】

摘 要 随着文化产业的蓬勃发展,话剧艺术日益受到大众喜爱,便捷的购票方式成为观众的迫切需求。当前传统购票渠道存在购票流程繁琐、信息获取不及时等问题。本研究致力于开发一款基于 Java 的话剧购票小程序,Java 语言具有跨平台性、稳定性和…

Pr -- 耳机没有Pr输出的声音

问题 很久没更新视频号了,想用pr剪辑一下,结果使用Pr打开后发现耳机没有Pr输出的声音 解决方法 在编辑--首选项-音频硬件中设置音频硬件的输出为当前耳机设备

Leaflet根据坐标画圆形区域

在做地图应用时,有时需要根据指定的坐标来画一个圆形区域,比如签到打卡类的应用,此时我们可以使用 leaflet.Circle 来在在指定坐标上创建一个圆并添加到的地图上,其中可以通过 radius 属性可以指定区域半径,比如: con…

vue3中使用computed

在 Vue 3 中,computed 是一个非常重要的响应式 API,用于声明依赖于其他响应式状态的派生状态。以下是 computed 的详细用法: 1. 基本用法 import { ref, computed } from vueexport default {setup() {const firstName ref(张)const lastN…

【iOS】类结构分析

前言 之前我们已经探索得出对象的本质就是一个带有isa指针的结构体,这篇文章来分析一下类的结构以及类的底层原理。 类的本质 类的本质 我们在main函数中写入以上代码,然后利用clang对其进行反编译,可以得到c文件 可以看到底层使用Class接…

Vanna.AI:解锁连表查询的新境界

Vanna.AI:解锁连表查询的新境界 在当今数字化时代,数据已成为企业决策的核心驱动力。然而,从海量数据中提取有价值的信息并非易事,尤其是当数据分散在多个表中时,连表查询成为了数据分析师和开发者的日常挑战。传统的…

前端流行框架Vue3教程:24.动态组件

24.动态组件 有些场景会需要在两个组件间来回切换&#xff0c;比如 Tab 界面 我们准备好A B两个组件ComponentA ComponentA App.vue代码如下&#xff1a; <script> import ComponentA from "./components/ComponentA.vue" import ComponentB from "./…