div에 넘치는 요소가 있는지 jquery로 확인하십시오.

높이가 고정 된 div가 있고 overflow:hidden;

div에 div의 고정 높이를 초과하는 요소가 있는지 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]);
    }

}

반 가시적 계산을 원하지 않으면 약간의 차이로 계산할 수 있습니다.

나는 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/overflowing

라이브러리를 설치 한 후 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내 요소 ( "태그") 작은 시간이 걸릴 이미지를 포함하기 때문에 함수 호출 중에는 너비가 0이며 계산이 손상됩니다.

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

이것은 더 쉬워 보인다 ...