wykrywają elementy przelewać za pomocą jQuery

Question

CSS:

.blue 
    { 
    width:200px; 
    height:200px; 
    background-color:blue; 
    color:#000000; 
    overflow:auto; 
    } 

JavaScript:

function addChar() { 
    $('.blue').append('some text '); 
} 

HTML:

<div id='blue1' class="blue"></div><br /> 
<a href='javascript:void(0)' onclick='addChar()'>Add</a> 

div id='blue1' ma overflow własność ustawiony auto. Chcę wykryć przepełnienie, gdy to się stanie.

Answer 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; 
} 

/// to jest moje rozwiązanie

Answer 2

Jedynym sposobem, jaki mogę wymyślić jest stworzenie zagnieżdżonego DIV i porównanie zewnętrznej wysokości div z wewnętrznym div. Jeśli nie chcesz, aby zmodyfikować istniejący znaczników można dołączyć go przy użyciu jQuery tak:

var outer = $('.blue'), 
    inner = $('<div>').appendTo(outer); 

function addChar() { 
    inner.append('some text '); 
    if (inner.height() > outer.height()) { 
     console.log('overflowed'); 
    } 
} 

Answer 3

O ile wiem, trzeba będzie porównać width/clientWidth i height/clientHeight w funkcji addChar(). Kiedy to zmienia masz przewijania (chyba moddify wymiary gdzieś indziej ...)

coś takiego:

function addChar() { 
    var blueEl = $('.blue'); 
    blueEl.append ('some text '); 

    if (blueEl.width() !== blueEl[0].clientWidth || blueEl.height() !== blueEl[0].clientHeight) { 
     // element just got scrollbars 
    } 
} 

Answer 4

function addChar() { 
    $('.blue').append('some text '); 
    if ($('.blue').innerWidth() != 200) 
    { 
     alert("it happened"); 
    } 
} 

FYI należy użyć # BLUE1 nie .blue na szybsze wykonanie (chyba, że ​​masz wiele elementów klasy .blue jesteś dołączanie oczywiście)

Answer 5

$.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; 
}; 

Przykład:

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

Answer 6

można sprawdzić elementu scrollWidth i/lub scrollHeight właściwości przeciw Jego clientWidth i/lub clientHeight.

Należy zauważyć, że to faktycznie nie wymaga jQuery.

Answer 7

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

tutaj po prostu zapobiegam wysokości, ale myślę, że ta metoda może być również używana do szerokości.

Answer 8

rozwiązanie One-liner do konkretnego pytania:

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

Chciałem tylko trochę golfa. :]

. (Uwaga: To jest tylko do wykrywania przepełnienia poziomego, jest to trywialne, aby dodać pionową wykrywania przepełnienia również)

Answer 9

Kiedyś odpowiedź Luka, aż zdałem sobie sprawę, że każde dziecko było porównanie indywidualnie. Nie działało, ponieważ nie oblicza wymiarów zawartości węzła DOM, tylko każde dziecko z osobna.Kiedyś własnością DOM scrollHeight węzłów zamiast:

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

EDIT: Naprawiono błąd, spowodowanych przez użycie .height() który nie bierze pod uwagę wyściółkę.

Answer 10

Pomyślałem, że powinienem dodać ulepszone rozwiązanie oparte na odpowiedzi Praveena. To ulepszenie pozwala sprawdzić szerokość, wysokość lub oba. Stąd nazwa $.hasOverflow, więc również dzięki Luka. Operator trójskładnikowy sprawia, że ​​jest on bardziej wyrazisty i wyraźny.

/** 
* @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; 
} 

Answer 11

Oto plugin napisałem, co może się przydać, jeśli chcesz dowiedzieć się, czy element jest przelewać czy nie: https://github.com/ZetaSoftware/jquery-overflown-plugin.

Dzięki tej wtyczce, w oryginalnym przykładzie, można po prostu zrobić: $("#blue1").overflown(), aby dowiedzieć się, że dzieci z # blue1 są przepełnione.