обнаружить переполнение элементов с помощью jquery

Question

CSS:

 .blue
    {
     width:200px;
     height:200px;
     background-color:blue;
     color:#000000;
     overflow:auto;
    }

JavaScript:

function addChar() {
    $('.blue').append('some text  ');
}

HTML:

<div id='blue1' class="blue"></div><br />
<a href='javascript:void(0)' onclick='addChar()'>Add</a>

div id='blue1' имеет свойство overflow, установленное на auto.Я хочу обнаружить переполнение, когда это произойдет.

Answer 1

$.fn.HasScrollBar = function() {
    //note: clientHeight= height of holder
    //scrollHeight= we have content till this height
    var _elm = $(this)[0];
    var _hasScrollBar = false; 
    if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
        _hasScrollBar = true;
    }
    return _hasScrollBar;
}

/// это моё решение

Answer 2

$.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 3

Однострочное решение конкретного вопроса:

var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth;

Просто хотел немного поиграть в гольф. :]

(Примечание: это только для обнаружения горизонтального переполнения; добавление обнаружения вертикального переполнения также тривиально.)

Answer 4

Насколько я знаю, вам придется сравнить width/clientWidth и height/clientHeight в вашей функции addChar(). Когда это изменится, у вас появятся полосы прокрутки (если вы не измените размеры где-то еще ...)

Примерно так:

function addChar () {
    var blueEl = $( '.blue' );
    blueEl.append ( 'some text  ' );

    if ( blueEl.width () !== blueEl[0].clientWidth || blueEl.height () !== blueEl[0].clientHeight ) {
        // element just got scrollbars
    }
}

Answer 5

jQuery.fn.preventOverflow = function(){
    return this.each(function(){
        var defaultDisplay = $(this).css('display');
        var defaultHeight = $(this).height();

        $(this).css('display', 'table');
        var newHeight = $(this).height();
        $(this).css('display', defaultDisplay);
        if(newHeight > defaultHeight){
            $(this).height(newHeight);
        }
    });
};

$('.query').preventOverflow();

здесь я просто предотвращаю высоту, но я думаю, что этот метод можно использовать и для ширины.

Answer 6

Единственный способ, о котором я могу думать, - это создать вложенный DIV и сравнить внешнюю высоту div с внутренним div. Если вы не хотите изменять существующую разметку, вы можете добавить ее с помощью jQuery следующим образом:

var outer = $('.blue'),
    inner = $('<div>').appendTo(outer);

function addChar() {
    inner.append('some text ');
    if (inner.height() > outer.height()) {
        console.log('overflowed');
    }
}

Answer 7

Вот плагин, который я написал, который может пригодиться, если вы хотите узнать, переполнен ли элемент или нет: https://github.com/ZetaSoftware/jquery-overflown-plugin.

С этим плагином, в исходном примере, вы можете просто сделать: $("#blue1").overflown() чтобы выяснить, переполнены ли потомки # blue1.

Answer 8

Я использовал ответ Луки, пока не понял, что он сравнивает каждого ребенка в отдельности. Это не сработало, так как не рассчитывает размеры содержимого узла DOM, просто каждый дочерний элемент. Вместо этого я использовал свойство scrollHeight узлов DOM:

(function($) {
  $.fn.hasOverflow = function() {
    var $this = $(this);
    return $this[0].scrollHeight > $this.outerHeight() ||
        $this[0].scrollWidth > $this.outerWidth();
  };
})(jQuery);

РЕДАКТИРОВАТЬ: Исправлена ​​ошибка, вызванная использованием .height(), которая не учитывает отступы.

Answer 9

Можно проверить свойства элемента scrollWidth и / или scrollHeight по его clientWidth и / или clientHeight.

Обратите внимание, чтоэто на самом деле не требует jQuery.

Answer 10

Думаю, мне следует добавить улучшенное решение, основанное на ответе Правина. Это улучшение позволяет проверить ширину, высоту или оба. Отсюда и имя $.hasOverflow, поэтому спасибо Лука. Тернарный оператор делает его немного более выразительным и понятным.

/**
 * @param {Boolean} x overflow-x
 * @param {Boolean} y overflow-y
 */
$.fn.hasOverflow = function (x, y) {
    var el = $(this).get(0),
        width = el.clientWidth < el.scrollWidth,
        height = el.clientHeight < el.scrollHeight;

    return !x
        ? !y
        ? width || height
        : height
        : width;
}