Использовать jQuery для обнаружения переполнения контейнера?

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 и сравнивать размеры двух оберток, но все, что вы могли бы сделать, в конечном итоге окажется хакерским. Если функциональность действительно необходима, то вам придется жить с взломами.

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

Answer 5

Простое решение, которое я нашел, заключается в обнаружении scrollWidth из parent():

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

<час /> ... Я думаю, что индекс 0 ссылается на "корневой узел" родителя, получая оттуда свойство.