如何在HTML中禁用Ctrl+滚轮的页面放大和缩小功能？-小浪学习网

如何在HTML中禁用Ctrl+滚轮的页面放大和缩小功能？

本文介绍如何在html页面中禁用Ctrl键结合鼠标滚轮的页面缩放功能。一些开发者尝试使用resize事件，但效果不佳。以下提供两种有效的解决方案：

方案一：原生JavaScript方法

此方法通过监听mousewheel和keydown事件，并阻止默认行为来实现。代码如下：

document.addEventListener('mousewheel', function(e) {   e = e || window.event;   if ((e.wheelDelta && e.ctrlKey) || e.detail) {     e.preventDefault();   } }, { capture: false, passive: false });  document.addEventListener('keydown', function(event) {   if ((event.ctrlKey || event.metaKey) &&       (event.keyCode === 61 || event.keyCode === 107 ||        event.keyCode === 173 || event.keyCode === 109 ||        event.keyCode === 187 || event.keyCode === 189)) {     event.preventDefault();   } }, false);

方案二：vue.JS方法

立即学习“前端免费学习笔记（深入）”；

在Vue.js框架中，可以通过methods和mounted生命周期钩子来控制页面缩放比例。示例代码如下：

methods: {   keepRatio() {     let ratio = 0;     const screen = window.screen;     const ua = navigator.userAgent.toLowerCase();     if (window.devicePixelRatio !== undefined) {       ratio = window.devicePixelRatio;     } else if (ua.indexOf('msie') > -1) {       if (screen.deviceXDPI && screen.logicalXDPI) {         ratio = screen.deviceXDPI / screen.logicalXDPI;       }     } else if (window.outerWidth && window.innerWidth) {       ratio = window.outerWidth / window.innerWidth;     }     if (ratio) { ratio = Math.round(ratio * 100); }     this.ratio = (ratio / 100).toFixed(2);     document.body.style.zoom = 1 / this.ratio;   } }, mounted() {   this.keepRatio();   window.addEventListener('resize', this.keepRatio); }

这两种方法都能有效地防止Ctrl+滚轮缩放页面，确保页面视图的一致性。选择哪种方法取决于你的项目是否使用Vue.js框架。

文章版权归作者所有，未经允许请勿转载。

THE END