jQuery .height() che emette lo stesso valore di .scrollHeight su div con overflow: auto (IE8)

Dopo aver eseguito il routing su molte altre domande, non ho trovato una risposta che risolva il problema.jQuery .height() che emette lo stesso valore di .scrollHeight su div con overflow: auto (IE8)

Sto scrivendo una sceneggiatura per scoprire se il div è straripante. Ma quando si tenta di recuperare l'altezza visibile con jQuery.height(), jQuery.innerHeight() o JavaScripts offsetHeight. Mi viene assegnato il valore dell'intero div (Inclusa la parte che sta traboccando) vale a dire lo stesso valore di scrollHeight.

Lo stile DIV contenente:

{ 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 73%; 
    bottom: 0px; 
    float: left; 
    height: 100%; 
    top: 0px; 
}

ho creato un mock up dello scenario sul jsFiddle: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ (Assicuratevi di rendere lo schermo più piccolo di anteprima per creare la barra di scorrimento)

fonte

2014-09-01 Luke Turnbull

Quali 'div' stai rivolge con jQuery per ottenere il' height'? Il contenitore, o quello interno? – LcSalazar

Il contenitore uno, ci sono diversi div interni all'interno dei quali sono prodotti dal database. –

Tutto sembra buono, jQuery.height() e jQuery.innerHeight() non ha nulla a che fare con la proprietà di overflow. Restituiranno altezze, non solo la parte visibile.

Se si desidera conoscere l'altezza del contenuto, è necessario utilizzare scrollHeight. Questo scrollHeight è una proprietà javascript regolare che non c'è bisogno di utilizzare jQuery

document.getElementById("wrapper").scrollHeight;

Oppure si può utilizzare il selettore jQuery

Vedere la jsfiddle di lavoro: http://jsfiddle.net/scgz7an5/1/

noti che

$('#wrapper').scrollHeight;

restituisce undefined.

UPDATE

hai dimenticato la parte più importante di elementi galleggianti. Hai dimenticato di eliminarli.

Dai un'occhiata a questo jsfiddle, è una tua modifica ma con elementi fluttuanti cancellati. Qui vengono visualizzati valori diversi per scrollHeight e jQuery.height(). Vedi che .structureContent è quello che ha la barra di scorrimento, non .content né .width100.

.structureContent ha overflow:auto e la barra di scorrimento che vedi proviene da esso.

http://jsfiddle.net/L2bxmszv/5/

ho aggiunto questa classe per cancellare gli elementi galleggianti.

.clearfix:before, 
.clearfix:after, { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; } 
.clearfix:after { 
    clear: both; } 
.clearfix { 
    zoom: 1; }

Il risultato è stato questo:

.content 
324 for scrollHeight 
324 for clientHeight 
324 for jQuery.height() 
.structureContent 
324 for scrollHeight 
276 for clientHeight 
276 for jQuery.height()

vedere un grande articolo su elementi galleggianti e la loro liquidazione qui: http://css-tricks.com/all-about-floats/

fonte

2014-09-01 16:41:06

Ah, mi dispiace. Mi sembra di essere confuso. Ho provato tutti i seguenti metodi scrollHeight che hai mostrato e restituiscono lo stesso valore di .height() ext .. –

hai provato il jsfiddle che ti ho dato? aprire la console e vedere i valori restituiti, scrollHeight restituisce un valore diverso dall'altezza –

Sì, funziona bene, sembra che non funzioni sul mio specifico div. –

Ora ho trovato una soluzione per il mio problema, anche se non lo faccio capire pienamente perché lo sta facendo

Questo non è HTML e codice che ho scritto e mi è stato semplicemente scrivendo una correzione per vedere se viene visualizzata la barra di scorrimento. Ma ho scoperto che ottenere lo ScrollHeight e l'altezza del genitore del contenitore ha risolto il mio problema. Il confronto per vedere se lo scrollHeight è maggiore dell'altezza mi ha permesso di risolvere il problema.

fonte

2014-09-02 12:12:54

Vedere il mio aggiornamento. Con il tuo esempio di jsfiddle potrei sapere il motivo del fallimento nel tuo caso. –

Cheers man, sfortunatamente non riesco davvero a toccare nessuno degli elementi HTML perché potrebbe rovinare le altre pagine! Ma grazie per l'informazione, sta funzionando ora! Molte grazie. –

Se è possibile aggiungere una classe nel file CSS, quindi aggiungere la classe e senza modificare il codice HTML è possibile aggiungere la classe al vostro elemento da JavaScript utilizzando '$ ('structureContent. ') AddClass (' clearfix');.'. Puoi risolverlo in questo modo. –

La barra di scorrimento visualizzata è effettivamente sull'elemento .structureContent e non su .content. Questo è il motivo per cui .content restituisce tutti lo stesso valore. .content non viene troncato.

fonte

2014-09-02 15:58:37

jQuery .height() che emette lo stesso valore di .scrollHeight su div con overflow: auto (IE8)

risposta

Problemi correlati