使用jQuery检测容器溢出？

我已经看到了，但感觉必须有一个“更干净”的jQuery方法来实现这一点。我甚至不确定这是否真的适用于所有场景。jQuery有没有一种方法可以在不比较维度的情况下确定容器是否溢出

---

为了澄清，是否有一种方法来测试CSS属性

溢出：hidden

是否已经启动并隐藏了内容？

没有干净的方法。您可以将其制作为两个包装器，外层包装器具有

溢出：隐藏
，并比较两个包装器的维度，但是您可能做的任何事情都会被破解。如果功能确实是必要的，那么你将不得不忍受黑客的攻击

$.fn.hasOverflow = function() {
    var $this = $(this);
    var $children = $this.find('*');
    var len = $children.length;

    if (len) {
        var maxWidth = 0;
        var maxHeight = 0
        $children.map(function(){
            maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
            maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
        });

        return maxWidth > $this.width() || maxHeight > $this.height();
    }

    return false;
};

例如：

var $content = $('#content').children().wrapAll('<div>');
while($content.hasOverflow()){
    var size = parseFloat($content.css('font-size'), 10);
    size -= 1;
    $content.css('font-size', size + 'px');
}

var$content=$（'#content'）.children（）.wrapAll（''）；
而（$content.hasOverflow（））{
var size=parseFloat（$content.css（'font-size'），10）；
尺寸-=1；
$content.css（'font-size'，size+'px'）；
}
您可以根据需要更改css属性

$.fn.hasOverflow = function() {
    $(this).css({ overflow: "auto", display: "table" });
    var h1 = $(this).outerHeight();

    $(this).css({ overflow: "hidden", display: "block" });
    var h2 = $(this).outerHeight();

    return (h1 > h2) ? true : false;
};



我发现一个简单的解决方案是检测
parent（）的
scrollWidth
：



…我认为
0
索引指的是父节点的“根节点”，从那里获取属性。
存在另一种解决方案（此示例测试高度是否溢出），它要求溢出容器为
位置：相对
：

HTML
叹息。。。我想你是对的。谢谢你的帮助。我执行了一个相当轻松的
width
检查。在我接受之前，我会让它运行一段时间，看看是否有人有一个实际的解决方案。刚刚遇到这个问题，我想在一个没有滚动条的页面上创建一个菜单（即，主体“固定”为100%宽度/高度，这样我就可以将页脚粘贴到底部而不重叠内容）。我想检测菜单是否溢出，如果溢出，则显示一个向下移动的按钮（而不是一个“orrible”滚动条，因此它可以使用jQuery平滑地向下滑动）。我想我也只能忍受黑客，除非另一个答案能满足我的需要。不管怎样，我开始评论的原因只是说@Jason，我认为这已经运行了很久了<代码>返回（h1>h2）？真：假重复…
返回h1>h2应该足够了；）这假设子项不是内联的，在这种情况下，我们可能必须检查所有宽度/高度的总和。可能的重复项
var totalWidth = $(this).parent()[0].scrollWidth;

<div id="overflowing-container" style="position:relative">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

     var last = $('.children:last'), container=$('#overflowing-container')
         lastOffsetHeight = container.scrollTop() + last.outerHeight(true) + last.position().top;

     if (last[0] && lastOffsetHeight > container[0].getBoundingClientRect().height) {
       console.log("thisContainerOverflows")     
     }