Kiểm tra với jquery nếu div có các phần tử tràn

Tôi có một div với chiều cao cố định và overflow:hidden;

Tôi muốn kiểm tra với jQuery nếu div có các phần tử vượt quá chiều cao cố định của div. Tôi có thể làm cái này như thế nào?

Bạn thực sự không cần bất kỳ jQuery nào để kiểm tra xem có xảy ra tràn hay không. Sử dụng element.offsetHeight, element.offsetWidth, element.scrollHeightvà element.scrollWidthbạn có thể xác định xem yếu tố của bạn có nội dung lớn hơn kích thước của nó:

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

Xem ví dụ trong hành động: Fiddle

Nhưng nếu bạn muốn biết phần tử nào bên trong phần tử của bạn có thể nhìn thấy hay không thì bạn cần phải tính toán nhiều hơn. Có ba trạng thái cho một yếu tố con về khả năng hiển thị:

Nếu bạn muốn đếm các mục bán hiển thị, đó sẽ là tập lệnh bạn cần:

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

}

Và nếu bạn không muốn tính nửa hiển thị, bạn có thể tính toán với một chút khác biệt.

Tôi có cùng câu hỏi với OP và không có câu trả lời nào phù hợp với nhu cầu của tôi. Tôi cần một điều kiện đơn giản, cho một nhu cầu đơn giản.

Đây là câu trả lời của tôi:

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

Ngoài ra, bạn có thể thay đổi scrollWidthbởi scrollHeightnếu bạn cần phải kiểm tra cả hai trường hợp.

Vì vậy, tôi đã sử dụng thư viện jquery tràn: https://github.com/kevinmarx/overflowing

Sau khi cài đặt thư viện, nếu bạn muốn gán lớp overflowingcho tất cả các phần tử tràn, bạn chỉ cần chạy:

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

Điều này sau đó sẽ cung cấp cho lớp overflowing, như trong <div class="targetElement overflowing">tất cả các yếu tố đang tràn. Sau đó, bạn có thể thêm phần này vào một số trình xử lý sự kiện (nhấp, di chuột) hoặc chức năng khác sẽ chạy mã ở trên để nó cập nhật động.

Một phần dựa trên câu trả lời của Mohsen (điều kiện đầu tiên được thêm vào bao gồm trường hợp đứa trẻ bị ẩn trước cha mẹ):

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

Sau đó, chỉ cần làm:

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

Một phương pháp là kiểm tra scrollTop với chính nó. Cung cấp cho nội dung một giá trị cuộn lớn hơn kích thước của nó và sau đó kiểm tra xem scrollTop của nó có bằng 0 hay không (nếu không phải là 0, nó có tràn không.)

http://jsfiddle.net/ukvBf/

Trong tiếng Anh đơn giản: Lấy phần tử cha. Kiểm tra chiều cao của nó và lưu giá trị đó. Sau đó lặp qua tất cả các yếu tố con và kiểm tra chiều cao cá nhân của chúng.

Điều này là bẩn, nhưng bạn có thể có được ý tưởng cơ bản: http://jsfiddle.net/VgDgz/

Đây là một giải pháp jQuery thuần túy, nhưng nó khá lộn xộn:

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
}

Đây là giải pháp jQuery phù hợp với tôi. offsetWidthvv đã không làm việc.

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

Nếu điều này không hoạt động, hãy đảm bảo rằng cha mẹ của các thành phần có chiều rộng mong muốn (cá nhân tôi phải sử dụng parent().parent()). Có positionliên quan đến cha mẹ. Tôi cũng đã bao gồm extra_widthvì các thành phần của tôi ("thẻ") chứa hình ảnh mất ít thời gian để tải, nhưng trong khi gọi hàm chúng có độ rộng bằng 0, làm hỏng phép tính. Để giải quyết vấn đề đó, tôi sử dụng mã gọi sau:

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

Hi vọng điêu nay co ich.

Tôi đã sửa lỗi này bằng cách thêm một div khác trong số tràn. Sau đó, bạn so sánh độ cao của 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>

và js

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

Điều này có vẻ dễ dàng hơn ...