使用 jquery 檢查 div 是否有溢出元素

Question

我有一個固定高度和overflow:hidden;的 div overflow:hidden;

我想用 jQuery 檢查 div 是否有超出 div 固定高度的元素。 我怎樣才能做到這一點？

Answer 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

但是，如果您想知道元素中的哪個元素可見或不可見，則需要進行更多計算。 就可見性而言，子元素有三種狀態：

如果您想計算半可見項目，這將是您需要的腳本：

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

}

如果你不想計算半可見，你可以稍微計算一下。

Answer 2

我和 OP 有同樣的問題，但這些答案都不符合我的需求。 我需要一個簡單的條件，為了一個簡單的需要。

這是我的回答：

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

此外，如果您需要測試這兩種情況，您可以通過scrollHeight更改scrollWidth 。

Answer 3

部分基於 Mohsen 的回答（添加的第一個條件涵蓋了孩子隱藏在父母之前的情況）：

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

Answer 4

所以我使用了溢出的jquery庫： https : //github.com/kevinmarx/overflowing

安裝庫后，如果要將overflowing類分配給所有溢出元素，只需運行：

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

這將使類overflowing ，如<div class="targetElement overflowing">中的所有元素溢出。 然后，您可以將其添加到某個事件處理程序（單擊、鼠標懸停）或其他將運行上述代碼的函數中，以便它動態更新。

Answer 5

我通過在溢出的 div 中添加另一個 div 來解決這個問題。 然后比較 2 個 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')
    }

這看起來更容易...

Answer 6

一種方法是針對自身檢查 scrollTop。 給內容一個大於其大小的滾動值，然后檢查其 scrollTop 是否為 0（如果不是 0，則表示溢出。）

http://jsfiddle.net/ukvBf/

Answer 7

簡單來說：獲取父元素。 檢查它的高度，並保存該值。 然后遍歷所有子元素並檢查它們各自的高度。

這很臟，但你可能會得到基本的想法： http : //jsfiddle.net/VgDgz/

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

希望這可以幫助。

Answer 9

這是一個純 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
}