使用jQuery检测容器溢出？

一尘不染

使用jQuery检测容器溢出？

css

我已经看到了这个问题，但是感觉必须要有一个“更清洁”的jQuery方法来做到这一点。我什至不确定这是否真的适用于所有情况。jQuery是否可以在不比较尺寸的情况下确定容器是否溢出？

为了澄清起见，有没有一种方法可以测试CSS属性是否已插入overflow: hidden并且是否隐藏了内容？

阅读 296

2020-05-16

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

2020-05-16