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
繁體地址,請注明出處:http://hk.pswp.cn/news/906792.shtml
英文地址,請注明出處:http://en.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 "./…