ตรวจสอบด้วย 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]);
    }

}

และถ้าคุณไม่ต้องการนับแบบกึ่งมองเห็นคุณสามารถคำนวณโดยมีผลต่างเพียงเล็กน้อย

ฉันมีคำถามเดียวกันกับ OP และไม่มีคำตอบใดที่ตรงกับความต้องการของฉัน ฉันต้องการเงื่อนไขง่ายๆสำหรับความต้องการง่ายๆ

นี่คือคำตอบของฉัน:

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/overflow

หลังจากติดตั้งไลบรารีแล้วหากคุณต้องการกำหนดคลาสoverflowingให้กับองค์ประกอบที่มากเกินไปคุณเพียงแค่เรียกใช้:

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

จากนั้นจะให้ชั้นเรียนoverflowingเช่นเดียว <div class="targetElement overflowing">กับองค์ประกอบทั้งหมดที่ล้น จากนั้นคุณสามารถเพิ่มสิ่งนี้ลงในตัวจัดการเหตุการณ์ (คลิกเมาส์โอเวอร์) หรือฟังก์ชันอื่น ๆ ที่จะเรียกใช้โค้ดด้านบนเพื่อให้อัปเดตแบบไดนามิก

บางส่วนขึ้นอยู่กับคำตอบของ 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');

วิธีหนึ่งคือตรวจสอบ 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 อื่นในอันที่ล้น จากนั้นคุณเปรียบเทียบความสูงของ 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')
    }

แบบนี้ดูง่ายกว่า ...