[JQUERY] DIV가 넘쳐 요소가있는 경우 jQuery로 확인

DIV가 넘쳐 요소가있는 경우 jQuery로 확인

해결법

1. ---

   1.당신은 실제로 발생 여부를 오버 플로우가 있는지 확인하기 위해 어떤 jQuery를 필요가 없습니다. 당신의 요소는 그것의 크기보다 내용 더 큰 경우 확인할 수 있습니다 element.offsetHeight, element.offsetWidth, element.scrollHeight 및 element.scrollWidth을 사용 :

   당신은 실제로 발생 여부를 오버 플로우가 있는지 확인하기 위해 어떤 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
   }
   

   행동의 예를 참조하십시오 바이올린을

   당신이 알고 싶은 경우 귀하의 요소 내부에 어떤 요소 것은 볼 수 있습니다 또는 당신은 더 많은 계산을 할 필요가 없습니다. 가시성 측면에서 자식 요소에 대한 세 가지 상태가 있습니다 :

   당신이 준 표시되는 항목을 계산하려면 당신이 필요로하는 스크립트가 될 것입니다 :

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

   그리고 당신은 당신이 약간의 차이로 계산할 수 준 볼 카운트하지 않으려면.

2. ---

   2.나는 OP와 같은 질문을했고, 그 대답 아무도 내 요구를 장착합니다. 나는 간단한 필요성에 대한 간단한 조건을 필요로했다.

   나는 OP와 같은 질문을했고, 그 대답 아무도 내 요구를 장착합니다. 나는 간단한 필요성에 대한 간단한 조건을 필요로했다.

   여기에 내 대답입니다 :

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

   당신은 어떤 경우를 테스트해야하는 경우 또한, scrollHeight로 scrollWidth을 변경할 수 있습니다.

3. ---

   3.그래서이 넘쳐 jQuery 라이브러리를 사용 : https://github.com/kevinmarx/overflowing

   그래서이 넘쳐 jQuery 라이브러리를 사용 : https://github.com/kevinmarx/overflowing

   모든 넘쳐 요소에 넘쳐 클래스를 지정하려면 라이브러리를 설치 한 후, 당신은 단순히 실행 :

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

   이것은 다음 클래스가 범람하는 모든 요소에

   에서와 같이 넘쳐 줄 것이다. 그런 다음 동적으로 업데이트되도록 위의 코드를 실행하는 몇 가지 이벤트 핸들러 (클릭, 마우스 오버) 또는 다른 기능이 추가 할 수 있습니다.

4. ---

   4.부분적으로 모센의 답변에 따라 (추가 된 첫 번째 조건은 아이가 부모 전에 숨겨져있는 경우 커버) :

   부분적으로 모센의 답변에 따라 (추가 된 첫 번째 조건은 아이가 부모 전에 숨겨져있는 경우 커버) :

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

5. ---

   5.한 가지 방법은 그 자체에 대한 scrollTop을 확인하는 것입니다. 크기보다을 내용으로 스크롤 큰 값을 제공하고 그 scrollTop 0인지 아닌지 확인 (그것이 0이 아닌 경우에, 그 오버 플로우를 갖는다.)

   한 가지 방법은 그 자체에 대한 scrollTop을 확인하는 것입니다. 크기보다을 내용으로 스크롤 큰 값을 제공하고 그 scrollTop 0인지 아닌지 확인 (그것이 0이 아닌 경우에, 그 오버 플로우를 갖는다.)

   http://jsfiddle.net/ukvBf/

6. ---

   6.일반 영어로 : 부모 요소를 가져옵니다. 그것의 높이를 확인하고 그 값을 저장합니다. 모든 자식 요소를 통해 다음 루프는 개인의 높이를 확인합니다.

   일반 영어로 : 부모 요소를 가져옵니다. 그것의 높이를 확인하고 그 값을 저장합니다. 모든 자식 요소를 통해 다음 루프는 개인의 높이를 확인합니다.

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

7. ---

   7.여기에 순수 jQuery를 솔루션은, 그러나 오히려 지저분한입니다 :

   여기에 순수 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
   }
   

8. ---

   8.이것은 나를 위해 일한 JQuery와 솔루션입니다. 등의 offsetWidth 작동하지 않았다.

   이것은 나를 위해 일한 JQuery와 솔루션입니다. 등의 offsetWidth 작동하지 않았다.

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

   이없는 작업을 수행하면 해당 요소의 부모가 원하는 폭 보장 (개인적으로, 내가 사용하는 부모에게 있었다 (). 부모 ()). 위치는 상위 상대적이다. 나는 또한 내 요소 ( "태그") 부하에 작은 시간을 이미지를 포함하기 때문에 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();
       }
   });
   

   도움이 되었기를 바랍니다.

9. ---

   9.나는 넘치는 하나의 다른 사업부를 추가하여이 문제를 해결했습니다. 그럼 당신은이 개 된 div의 높이를 비교합니다.

   나는 넘치는 하나의 다른 사업부를 추가하여이 문제를 해결했습니다. 그럼 당신은이 개 된 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')
       }
   

   이것은 쉽게 보이는 ...

from https://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements by cc-by-sa and MIT license