div에 오버플로 요소가 있는지 jquery로 확인합니다.

div에 오버플로 요소가 있는지 jquery로 확인합니다.

저는 고정된 키를 가진 디브가 있고,overflow:hidden;

나는 div가 div의 고정된 높이를 초과하는 요소를 가지고 있는지 jQuery에 확인하고 싶습니다.어떻게 해야 하나요?

실제로 오버플로가 발생하는지 여부를 확인하기 위해 jQuery가 필요하지 않습니다., 및 를 사용하여 요소의 내용이 크기보다 큰지 여부를 확인할 수 있습니다.

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

실행 중인 예를 참조:피들

그러나 요소 내부에 어떤 요소가 표시되는지 여부를 알고 싶다면 더 많은 계산이 필요합니다.하위 요소에는 가시성 측면에서 세 가지 상태가 있습니다.

반투명 항목을 계산하려면 다음 스크립트가 필요합니다.

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둘 중 하나를 테스트해야 하는 경우.

부분적으로 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');

그래서 저는 넘쳐나는 jquery 라이브러리를 사용했습니다: https://github.com/kevinmarx/overflowing

라이브러리를 설치한 후 클래스를 할당하려는 경우overflowing모든 오버플로 요소에 대해 다음을 실행합니다.

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

그러면 수업이 진행됩니다.overflowing에 있어서와 같이<div class="targetElement overflowing">넘쳐나는 모든 요소에.그런 다음 이벤트 핸들러(클릭, 마우스 오버) 또는 위의 코드를 실행하여 동적으로 업데이트하는 다른 함수에 이를 추가할 수 있습니다.

한 가지 방법은 scrollTop을 자체적으로 확인하는 것입니다.내용에 크기보다 큰 스크롤 값을 지정한 다음 scrollTop이 0인지 확인합니다(0이 아니면 오버플로가 있습니다).

http://jsfiddle.net/ukvBf/

나는 이것을 오버플로우되는 디브에 다른 디브를 추가하여 고쳤습니다.그런 다음 두 디브의 높이를 비교합니다.

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

이게 더 쉬워 보여요...

일반 영어: 부모 요소를 가져옵니다.높이를 확인하고 값을 저장합니다.그런 다음 모든 어린이 요소를 반복적으로 살펴보고 개별 높이를 확인합니다.

이것은 더럽지만 기본적인 아이디어를 얻을 수도 있습니다: http://jsfiddle.net/VgDgz/

이것은 저에게 효과가 있었던 jQuery 솔루션입니다.offsetWidth등은 작동하지 않았습니다.

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

효과가 너비를 (는 이이작동개요않부원너소확비지다인니합함인하모는가야사의것로해용으인적으하지면개▁(▁if함▁has▁had▁to▁use'(person확다▁ensure인,니ally이▁this▁doesn▁the합▁i▁that것▁desired▁elements▁parent▁width사,).parent().parent()).position는 부모에 상대적입니다.는 또한 또나다니습포했함한는다▁included니를 포함했습니다.extra_width왜냐하면 내 요소("module")에는 로드하는 데 시간이 조금 걸리는 이미지가 포함되어 있지만 함수 호출 중에는 너비가 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();
    }
});

이게 도움이 되길 바랍니다.

순수한 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
}

언급URL : https://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements