当前位置：文江博客话题详情

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

发布于 2024-07-13 18:11:58 字数 97 浏览 8 评论 0原文

如何使用 css 或 javascript 在某些元素上禁用 ctrl/wheel 缩放效果。我创建了一个菜单栏，当应用缩放效果时，该菜单栏会变形。我想仅对某些元素禁用它。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

時窥 2024-07-20 18:11:59

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

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

回复收藏 0 原文

后来的我们 2024-07-20 18:11:59

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;
    }
}

solution for IE and 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;
    }
}

回复收藏 0 原文

始终不够 2024-07-20 18:11:59

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

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

回复收藏 0 原文

予囚 2024-07-20 18:11:59

这是我的问题：
我一直用 em 进行设计，它们的效果非常神奇。但通过全页缩放，我的背景也会放大。如果我有一个重复图案作为主背景，我不希望它变得像素化。
它们确实帮助我们避免了一些工作，比如实现 Doug Bowman 的 CSS 滑动门，但现在我不得不忍受模糊的选项卡。

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

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