使用jQuery检测容器溢出？

Question

我看到了这个问题，但感觉一定有一种更“清晰”的jQuery方法来解决它。我甚至不确定这是否适用于所有情况。是否有一种方法可以让jQuery确定容器是否存在溢出，而无需比较尺寸？

为了澄清，是否有一种方法可以测试CSS属性overflow: hidden是否已启动并隐藏内容？

- Jason

---

可能是detect elements overflow using jquery的重复问题。 - Noyo

Answer 1

$.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');
}

- Luka Zakrajšek

---

这假定子元素没有被内联，否则我们可能需要检查所有宽度/高度的总和。 - Sujay

Answer 2

您可以更改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;
};

- user1058982

---

return (h1 > h2) ? true : false; 这段代码有些重复了， return h1 > h2; 就足够了 ;) - Shikiryu

Answer 3

没有干净的方法。你可以做两个包装器，外部包装器具有 overflow: hidden，并比较两个包装器的尺寸，但任何你可能做的事情最终都会成为 hacky。如果这个功能确实是必要的，那么你就不得不接受这些 hack。

- Matchu

---

叹气...我想你是对的。谢谢你的帮助。我实现了一个相当无痛的width检查。在接受之前，我会让它运行一段时间，看看是否有任何实际解决方案。 - Jason

刚刚发现这个问题，想在一个没有滚动条的页面上创建一个菜单（即正文被“固定”为100％宽度/高度，以便我可以将页脚粘贴到底部而不重叠内容）。我想检测菜单是否溢出，如果是，则显示一个向下移动的按钮（而不是可怕的滚动条，因此它使用jQuery平稳地向下滑动）。除非其他答案可以满足我的需求，否则我只能忍受这些hack。无论如何，我开始评论的原因只是想告诉@Jason，我认为这已经运行了很长时间！ - ClarkeyBoy

Answer 4

还有另一种解决方案（此示例测试高度是否溢出），它要求溢出的容器为position:relative：

HTML

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

Javascript

     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")     
     }

- David Heidrich

Answer 5

一个我发现的简单解决方案是检测parent()的scrollWidth:

var totalWidth = $(this).parent()[0].scrollWidth;

---

......我认为0索引是指父级的“根节点”，从那里获取其属性。

- Ian Campbell