Проверьте с jquery, если div имеет переполненные элементы

Ответ 1

На самом деле вам не нужен jQuery, чтобы проверить, произошло ли переполнение или нет. Используя element.offsetHeight, element.offsetWidth, element.scrollHeight и element.scrollWidth вы можете определить, есть ли у вашего элемента контент больше, чем размер:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

См. пример в действии: Fiddle

Но если вы хотите знать, какой элемент внутри вашего элемента виден или нет, вам нужно сделать больше вычислений. Существует три состояния для дочернего элемента с точки зрения видимости:

Если вы хотите подсчитать полувидимые элементы, вам понадобится script:

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.push(element.children[i]);
    }

}

И если вы не хотите считать полу-видимым, вы можете рассчитать с небольшой разницей.

Ответ 2

У меня был тот же вопрос, что и у OP, и ни один из этих ответов не соответствовал моим потребностям. Для простой необходимости мне было простое условие.

Вот мой ответ:

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

Кроме того, вы можете изменить scrollWidth на scrollHeight, если вам нужно проверить любой случай.

Ответ 3

Один метод - проверить scrollTop на себя. Дайте контенту значение прокрутки больше его размера, а затем проверьте, не имеет ли его scrollTop 0 или нет (если оно не равно 0, оно имеет переполнение).

http://jsfiddle.net/ukvBf/

Ответ 4

Частично основанный на ответе Мохсена (добавленное первое условие охватывает случай, когда ребенок скрыт перед родителем):

jQuery.fn.isChildOverflowing = function (child) {
  var p = jQuery(this).get(0);
  var el = jQuery(child).get(0);
  return (el.offsetTop < p.offsetTop || el.offsetLeft < p.offsetLeft) ||
    (el.offsetTop + el.offsetHeight > p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth > p.offsetLeft + p.offsetWidth);
};

Затем просто выполните:

jQuery('#parent').isChildOverflowing('#child');

Ответ 5

Итак, я использовал переполняющую библиотеку jquery: https://github.com/kevinmarx/overflowing

После установки библиотеки, если вы хотите присвоить класс overflowing всем переполняющим элементам, вы просто запускаете:

$('.targetElement').overflowing('.parentElement')

Затем это даст класс overflowing, как и в <div class="targetElement overflowing"> для всех элементов, которые переполняются. Затем вы можете добавить это к некоторому обработчику событий (щелчок, мыши) или другой функции, которая будет запускать указанный выше код, чтобы он обновлялся динамически.

Ответ 6

В простом английском: Получить родительский элемент. Проверьте высоту и сохраните это значение. Затем пропустите все дочерние элементы и проверьте их индивидуальные высоты.

Это грязно, но вы можете получить основную идею: http://jsfiddle.net/VgDgz/

Ответ 7

Здесь чисто jQuery решение, но это довольно грязно:

var div_height = $(this).height();
var vertical_div_top_position = $(this).offset().top;
var lastchild_height = $(this).children('p:last-child').height();
var vertical_lastchild_top_position = $(this).children('p:last-child').offset().top;
var vertical_lastchild_bottom_position = lastchild_height + vertical_lastchild_top_position;
var real_height = vertical_lastchild_bottom_position - vertical_div_top_position;

if (real_height > div_height){
    //overflow div
}

Ответ 8

Это решение jQuery, которое сработало для меня. offsetWidth и т.п. не работает.

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

Если это не работает, убедитесь, что родительский элемент имеет требуемую ширину (лично мне пришлось использовать parent().parent()). position относительно родителя. Я также включил extra_width, потому что мои элементы ( "теги" ) содержат изображения, которые занимают мало времени для загрузки, но во время вызова функции они имеют нулевую ширину, испортив вычисление. Чтобы обойти это, я использую следующий код вызова:

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

Надеюсь, что это поможет.