在运行时禁用 CTRL/滚轮缩放效果

Posted 2023-05-08

【中文标题】在运行时禁用 CTRL/滚轮缩放效果

【英文标题】：disable the CTRL/Wheel zoom effect at runtime

【发布时间】：2010-10-07 06:05:45

【问题描述】：

如何在某些元素上使用 css 或 javascript 禁用 ctrl/wheel 缩放效果。我创建了一个在应用缩放效果时会失真的菜单栏。我只想对某些元素禁用它。

【问题讨论】：

这是一个可访问性问题，您应该尝试解决它而不是反对它。这就是为什么您应该使用相对单位“em”来调整 css 元素的大小。 Gmail 是相对大小的一个很好的例子。去那里将浏览器文本大小更改为更大或更小。

【参考方案1】：

更好的主意：设计您的布局，使其足够健壮以处理此类更改。你不能禁用它们，即使你修复了字体大小（你一开始就不应该这样做），所以你不妨优雅地响应缩放。

事实是，如果浏览器对所有元素进行同等缩放，那么您的页面外观和工作方式应该与以前完全相同（除了，你知道，更大），除非您在设计中某处采用了一些懒惰的快捷方式.

【讨论】：

“事实是，如果所有元素都被浏览器平等地缩放......” 我认为他在过去占主导地位的仅字体缩放方面遇到了麻烦。幸运的是，它正在消失……不幸的是，几年后它仍然是一个问题。

这很公平。如果页面的某些功能部分不需要用字体缩放（即除内容之外的任何内容），我可以修复它们的大小。但是，如果他使用的是依赖于像素完美定位的 JS 或任何类似的东西，那将是一个失败的原因。

@Welbog 事实上，浏览器存在缺陷：***.com/q/10914174/632951

【参考方案2】：

IE 和 Firefox 解决方案：

var obj=document.body;  // obj=element for example body
// bind mousewheel event on the mouseWheel function
if(obj.addEventListener)

    obj.addEventListener('DOMMouseScroll',mouseWheel,false);
    obj.addEventListener("mousewheel",mouseWheel,false);

else obj.onmousewheel=mouseWheel;

function mouseWheel(e)

    // disabling
    e=e?e:window.event;
    if(e.ctrlKey)
    
        if(e.preventDefault) e.preventDefault();
        else e.returnValue=false;
        return false;
    

【讨论】：

仅供参考，这在 webkit 浏览器中不起作用，因为控制键按下会覆盖鼠标滚轮事件并且未被检测到。

【参考方案3】：

你不能；这是浏览器功能，而不是文档功能。

话虽如此，如果你使用 CSS 的 style="font-size: 9px;"，你可以覆盖文本大小。浏览器缩放仍然有效，浏览器字体大小的变化会产生一些重新格式化的效果。

【参考方案4】：

这是我的问题： 我一直使用 em 进行设计，它们的工作原理很神奇。但是通过整页缩放，我的背景也被放大了。如果我有一个重复的图案作为主要背景，我不希望它变得像素化。 它们确实帮助我们避免了一些工作，例如实现 Doug Bowman 的 CSS 滑动门，但现在我不得不忍受模糊的标签。

我还有另一个问题是全页缩放，至少在今天的浏览器中是这样： 我是那些将我的浏览器设置为 12pt 字体而不是 16pt 的“那些”人之一。每隔一段时间，我就会遇到一个（当然是固定宽度的）网站，它将文本调整为很小的大小（我猜他们在尝试制作时使用了 0.9em 或其他东西，而不是 14px更小）。我通常只会放大一两个档次，一切都会好起来的。但是，使用整页缩放时，图像的缩放比例很差，而且我有一个水平滚动条。

第一个问题的解决方案是允许背景图像标签中的某种处理指令禁止对该元素进行整页缩放。或者可能是文档头部的某些内容。如果浏览器真的想要公平，他们还可以为用户提供一个他们可以设置的选项，以覆盖 no-zoom 指令，因此如果他们愿意，他们可以无论如何都可以缩放。 第二个问题的解决方案是全页缩放首先以 16px/em 的速率将所有 px 转换为 em，然后 然后 缩小到您的文本大小，而不是将 px 转换为em 使用您的文本大小作为基础。然后向上滚动到 16 像素将使图像按预期大小完美。