CSS 在运行时禁用 CTRL/Wheel 缩放效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/542576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable the CTRL/Wheel zoom effect at runtime
提问by Welbog
How do you disable the ctrl/wheel zoom effect with css or javascript on certain elements. I create a menu bar that gets distorted when the zoom effect is applied. I would like to disable it for just certain elements.
如何在某些元素上使用 css 或 javascript 禁用 ctrl/wheel 缩放效果。我创建了一个在应用缩放效果时会扭曲的菜单栏。我想仅针对某些元素禁用它。
回答by Welbog
Better idea: design your layout so that it's robust enough to handle changes like this. You can't disable them, even if you fix the font size (which you should never do in the first place), so you might as well respond to zooming gracefully.
更好的主意：设计您的布局，使其足够健壮以处理此类更改。您无法禁用它们，即使您修复了字体大小（您一开始就不应该这样做），因此您不妨优雅地响应缩放。
The fact is, if all elements are scaled equally by the browser, your page should look and work exactly the same way as it did before (except, y'know, bigger) unless you took some lazy shortcuts in your design somewhere.
事实是，如果所有元素都被浏览器同等缩放，除非您在设计中的某处采用了一些懒惰的快捷方式，否则您的页面应该看起来和工作方式与以前完全相同（除非您知道，更大）。
回答by holden321
solution for IE and Firefox:
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;
}
}
回答by tsilb
You can't; this is a browser feature, not a document feature.
你不能；这是浏览器功能，而不是文档功能。
Having said that, if you use CSS's style="font-size: 9px;", you can override text size. Browser zoom will still work, and browser font size changes will have some reformatting effects.
话虽如此，如果您使用 CSS 的 style="font-size: 9px;" ，您可以覆盖文本大小。浏览器缩放仍然有效，并且浏览器字体大小的更改会产生一些重新格式化的效果。
回答by tsilb
Here's my problem: I've always designed with ems, and they work magically. But with full-page zoom, my backgrounds are also zoomed in. If I have a repeating pattern as the main background, I don't want that to become pixelized. They do help us avoid some work, like implementing Doug Bowman's Sliding Doors of CSS, but now I have to live with blurry tabs.
这是我的问题：我一直用 em 进行设计，而且它们的工作很神奇。但是在整页缩放时，我的背景也被放大了。如果我有一个重复的图案作为主要背景，我不希望它变得像素化。它们确实帮助我们避免了一些工作，比如实现 Doug Bowman 的 CSS 滑动门，但现在我不得不忍受模糊的标签。
I also have another problem with full-page zoom, at least as it's implemented in today's browsers: I'm one of 'those' people who set my browser to 12pt font instead of 16pt. Every once in a while, I'd come across a (fixed-width, of course) site that resizes the text to a tiny size (I'm guessing they used 0.9em or something, instead of 14px, while trying to make it smaller). I'd usually just zoom in a notch or two, and all would be well. With full-page zoom, though, the images scale badly and I have a horizontal scrollbar.
我还有另一个关于全页缩放的问题，至少在今天的浏览器中实现了它：我是将我的浏览器设置为 12pt 字体而不是 16pt 的“那些”人之一。每隔一段时间，我就会遇到一个（当然是固定宽度）网站，它将文本调整为很小的尺寸（我猜他们在尝试制作时使用了 0.9em 或其他大小，而不是 14px较小）。我通常只会放大一两个档次，一切都会好起来的。但是，使用整页缩放时，图像缩放很差，而且我有一个水平滚动条。
The solution to the first problem would be to allow some sort of processing instruction in the background-image tag to disallow full-page zoom on that element. Or maybe something in the document's head. If browsers really want to be fair about it, they could also give the users an option they could set that over-rides the no-zoom instruction, so they could zoom anyway if they so choose. The solution to the second problem would be for full-page zoom to convert all the px into em at a rate of 16px/em first, and thenzoom down to your text size, instead of converting px to em using your text size as a base. Then scrolling back up to 16px would make the images perfectly-sized, as intended.
第一个问题的解决方案是允许 background-image 标签中的某种处理指令禁止对该元素进行整页缩放。或者可能是文档中的某些内容。如果浏览器真的想公平对待它，他们还可以为用户提供一个选项，他们可以设置该选项来覆盖无缩放指令，因此如果他们愿意，无论如何他们都可以缩放。第二个问题的解决方案是全页缩放先以16px/em的速率将所有px转换为em，然后缩小到你的文字大小，而不是使用你的文字大小将px转换为em根据。然后滚动回 16px 将使图像按预期完美调整大小。
