Question

我见过this question但感觉必须有一个“更干净”的jQuery方法来做到这一点。我甚至不确定这是否真的适用于所有场景。有没有办法让jQuery在不比较维度的情况下确定容器是否有溢出？

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

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

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

Answer 3

没有干净的方法。你可以使它成为两个包装器，外包装器有overflow: hidden，并比较两个包装器的尺寸，但你可能做的任何事情都会变成hacky。如果功能确实是必要的，那么你将不得不忍受黑客攻击。

Answer 4

我发现一个简单的解决方案是检测scrollWidth的{{1}}：

parent()

<小时/> ...我认为

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

索引是指父项的“根节点”，从那里获取属性。

Answer 5

存在另一种解决方案，（此示例测试高度是否溢出）它需要溢出容器为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")     
     }

使用jQuery来检测容器溢出？

5 个答案:

HTML

的Javascript