Перевірте за допомогою jquery, чи в div є переповнені елементи

У мене є дів з фіксованою висотою і overflow:hidden;

Я хочу перевірити за допомогою jQuery, чи є в розділі елементи, які переповнюються повз фіксовану висоту діла. Як я можу це зробити?

Насправді вам не потрібен жоден 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 проти себе. Надайте вмісту значення прокрутки, що перевищує його розмір, а потім перевірте, чи є його прокрутка 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 у той, що переповнює. Потім ви порівнюєте висоти 2 діви.

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

Це виглядає простіше ...