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

У меня есть div с фиксированной высотой и overflow:hidden;

Я хочу проверить с помощью jQuery, имеет ли div элементы, которые выходят за пределы фиксированной высоты div. Как я могу это сделать?

На самом деле вам не нужен 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

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

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

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]);
    }

}

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

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

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

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

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

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

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

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

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

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

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

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

http://jsfiddle.net/ukvBf/

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

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

Вот чистое решение 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
}

Это решение 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();
    }
});

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

Я исправил это, добавив еще один div в тот, который переполняется. Затем вы сравниваете высоты двух делений.

<div class="AAAA overflow-hidden" style="height: 20px;" >
    <div class="BBBB" >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

и JS

    if ($('.AAAA').height() < $('.BBBB').height()) {
        console.log('we have overflow')
    } else {
        console.log('NO overflow')
    }

Это выглядит проще ...