[JQUERY] jQuery를 사용하여 오버 플로우 감지 요소를

jQuery를 사용하여 오버 플로우 감지 요소를

해결법

1. ---

   1.

   $.fn.HasScrollBar = function() {
       //note: clientHeight= height of holder
       //scrollHeight= we have content till this height
       var _elm = $(this)[0];
       var _hasScrollBar = false; 
       if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
           _hasScrollBar = true;
       }
       return _hasScrollBar;
   }
   

   ///이 내 솔루션입니다

2. ---

   2.

   $.fn.hasOverflow = function() {
       var $this = $(this);
       var $children = $this.find('*');
       var len = $children.length;
   
       if (len) {
           var maxWidth = 0;
           var maxHeight = 0
           $children.map(function(){
               maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
               maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
           });
   
           return maxWidth > $this.width() || maxHeight > $this.height();
       }
   
       return false;
   };
   

   예:

   var $content = $('#content').children().wrapAll('<div>');
   while($content.hasOverflow()){
       var size = parseFloat($content.css('font-size'), 10);
       size -= 1;
       $content.css('font-size', size + 'px');
   }
   

3. ---

   3.특정 질문에 대한 한 - 라이너 솔루션 :

   특정 질문에 대한 한 - 라이너 솔루션 :

   var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth;
   

   그냥 골프 비트를 원했다. :]

   (참고 : 이것은 단지 수평 오버 플로우 검출이며, 그것뿐만 아니라 수직 오버 플로우 감지 기능을 추가하는 사소한입니다.)

4. ---

   4.내가 알기로 당신은 당신의 addChar () 함수에서 폭 / clientWidth와 높이 / clientHeight을 비교해야합니다. 그건 당신이 스크롤바를 가지고 변경하면 (당신이 다른 곳에서 치수를 moddify하지 않는 한 ...)

   내가 알기로 당신은 당신의 addChar () 함수에서 폭 / clientWidth와 높이 / clientHeight을 비교해야합니다. 그건 당신이 스크롤바를 가지고 변경하면 (당신이 다른 곳에서 치수를 moddify하지 않는 한 ...)

   이 같은:

   function addChar () {
       var blueEl = $( '.blue' );
       blueEl.append ( 'some text  ' );
   
       if ( blueEl.width () !== blueEl[0].clientWidth || blueEl.height () !== blueEl[0].clientHeight ) {
           // element just got scrollbars
       }
   }
   

5. ---

   5.내가 생각할 수있는 유일한 방법은 중첩 된 DIV를 생성하고 내부 사업부와 외부 DIV의 높이를 비교하는 것입니다. 당신이 마크 업을 기존 수정하지 않을 경우는 다음과 같이 jQuery를 사용하여 추가 할 수 있습니다 :

   내가 생각할 수있는 유일한 방법은 중첩 된 DIV를 생성하고 내부 사업부와 외부 DIV의 높이를 비교하는 것입니다. 당신이 마크 업을 기존 수정하지 않을 경우는 다음과 같이 jQuery를 사용하여 추가 할 수 있습니다 :

   var outer = $('.blue'),
       inner = $('<div>').appendTo(outer);
   
   function addChar() {
       inner.append('some text ');
       if (inner.height() > outer.height()) {
           console.log('overflowed');
       }
   }
   

6. ---

   6.

   jQuery.fn.preventOverflow = function(){
       return this.each(function(){
           var defaultDisplay = $(this).css('display');
           var defaultHeight = $(this).height();
   
           $(this).css('display', 'table');
           var newHeight = $(this).height();
           $(this).css('display', defaultDisplay);
           if(newHeight > defaultHeight){
               $(this).height(newHeight);
           }
       });
   };
   
   $('.query').preventOverflow();
   

   여기 난 그냥 높이를 방지하고있어,하지만 난이 방법은 너무 폭하는 데 사용할 수 있다고 생각합니다.

7. ---

   7.당신은 clientWidth 및 / 또는 clientHeight에 대해 요소의 scrollWidth 및 / 또는 scrollHeight 속성을 확인할 수 있습니다.

   당신은 clientWidth 및 / 또는 clientHeight에 대해 요소의 scrollWidth 및 / 또는 scrollHeight 속성을 확인할 수 있습니다.

   이 실제로 jQuery를 필요로하지 않습니다.

8. ---

   8.나는 그것이 개별적으로 각 아동을 비교 깨달았다 전까지는 루카의 답변을 사용했다. 그것은 개별적으로, 단지 각 어린이 DOM 노드의 내용의 크기를 계산하지 않기 때문에 그것은 작동하지 않았다. 나는 DOM의 scrollHeight 속성을 대신 노드 사용 :

   나는 그것이 개별적으로 각 아동을 비교 깨달았다 전까지는 루카의 답변을 사용했다. 그것은 개별적으로, 단지 각 어린이 DOM 노드의 내용의 크기를 계산하지 않기 때문에 그것은 작동하지 않았다. 나는 DOM의 scrollHeight 속성을 대신 노드 사용 :

   (function($) {
     $.fn.hasOverflow = function() {
       var $this = $(this);
       return $this[0].scrollHeight > $this.outerHeight() ||
           $this[0].scrollWidth > $this.outerWidth();
     };
   })(jQuery);
   

   편집 : 계정에 패딩을지지 않습니다 .height의를 (사용하여 발생한 버그) 수정되었습니다.

9. ---

   9.https://github.com/ZetaSoftware/jquery-overflown-plugin : 다음은 요소가 오버 플로워인지 여부를 확인하려는 경우 유용하게 사용할 수 있습니다 내가 쓴 플러그인이 있습니다.

   https://github.com/ZetaSoftware/jquery-overflown-plugin : 다음은 요소가 오버 플로워인지 여부를 확인하려는 경우 유용하게 사용할 수 있습니다 내가 쓴 플러그인이 있습니다.

   이 플러그인으로, 원래 예를 들어, 당신은 할 수있다 : $ ( "#의 blue1")를 오버 플로워 () # blue1의 아이들이 넘쳐 밖으로 찾을 수 있습니다..

10. ---

    10.생각 나는 프라 빈의 답변에 따라 개선 솔루션을 추가해야합니다. 이러한 개선은 너비, 높이 또는 둘 모두를 검사 할 수있다. 따라서 감사 루카 그래서뿐만 아니라 이름 $ .hasOverflow. 삼항 연산자는 좀 더 표현하고 명확합니다.

    생각 나는 프라 빈의 답변에 따라 개선 솔루션을 추가해야합니다. 이러한 개선은 너비, 높이 또는 둘 모두를 검사 할 수있다. 따라서 감사 루카 그래서뿐만 아니라 이름 $ .hasOverflow. 삼항 연산자는 좀 더 표현하고 명확합니다.

    /**
     * @param {Boolean} x overflow-x
     * @param {Boolean} y overflow-y
     */
    $.fn.hasOverflow = function (x, y) {
        var el = $(this).get(0),
            width = el.clientWidth < el.scrollWidth,
            height = el.clientHeight < el.scrollHeight;
    
        return !x
            ? !y
            ? width || height
            : height
            : width;
    }
    

from https://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery by cc-by-sa and MIT license