Переполнение элементов с помощью jquery

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. Я хочу обнаружить переполнение, когда это произойдет.

Ответы

Ответ 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;
}

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

Ответ 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');
}

Ответ 3

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

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

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

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

Ответ 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
    }
}

Ответ 5

Единственный способ, которым я могу думать, - создать вложенный 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');
    }
}

Ответ 6

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();

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

Ответ 7

Вы можете проверить свойства scrollWidth и/или scrollHeight против clientWidth и/или clientHeight.

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

function addChar() { 
    $('.blue').append('some text  '); 
    if ($('.blue').innerWidth() != 200)
    {
      alert("it happened");
    }
}

FYI вы должны использовать # blue1 not.blue для более быстрого выполнения (если у вас нет нескольких элементов класса .blue, которые вы добавляете, конечно)

Ответ 11

Думаю, я должен добавить улучшенное решение, основанное на ответе Правэвена. Это улучшение позволяет проверять ширину, высоту или и то, и другое. Следовательно, имя $.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;
}