div에 넘치는 요소가 있는지 jquery로 확인하십시오. overflow:hidden; div에 div의 고정 높이를 초과하는

높이가 고정 된 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
}