2009-04-19 9 views
20

Ho due div in questo modoCome ottenere la larghezza overflow di un elemento in una pagina Web

<div id="parent" style="width:100px:overflow:hidden;"> 
    <div id="child"> 
     tooooooooooooooooooooo much content to fit in parent 
    </div> 
</div> 

sto dinamicamente l'aggiornamento del contenuto del bambino e lo scorrimento utilizzando jQuery. Mi piacerebbe essere in grado di trovare quanto è largo il bambino, quindi so quando smettere di scorrere. Il problema è che la larghezza effettiva del bambino una volta che il contenuto in overflow è presente, è più ampia persino dello schermo (sembra essere di circa 2500 pixel con il contenuto del test corrente). Il bordo dell'elemento, se impostato, non si estende alla larghezza effettiva del contenuto, il testo trabocca oltre il bordo visibile.

Uso jQuerys $('#child').width, il clientWidth, scrollWidth (grazie bobince) e offsetWidth proprietà tutta massimo fuori a 1024px (che è la larghezza del mio monitor). Qualcuno sa in qualche modo di scoprire quanto è ampio il contenuto degli elementi incluso l'overflow? Se aiuta, l'app che sto costruendo verrà eseguita in un ambiente di tipo kiosk, quindi una soluzione solo per Firefox (anche una versione notturna) va bene.

Aggiornamento: scrollWidth sulle opere principali, avrei dovuto leggere più attentamente, grazie ancora bobince.

risposta

25
document.getElementById('parent').scrollWidth 

scrollWidth è un'estensione IE che storicamente era meno ben supportato rispetto offsetWidth. Tuttavia al giorno d'oggi tutti i moderni browser desktop lo includono.

+0

temo scrollWith è maxing fuori a 1024px pure. Grazie per il suggerimento però. –

+0

Funziona per me in FF3 - inserisci un esempio di codice completo che non funziona? Verifica che stai guardando il scrollWidth "padre", non il "bambino", e che il contenuto troppo ampio non si avvolge naturalmente a 1024 (o usa "spazio bianco: no-wrap" per fermarlo). Infine controlla la sintassi - nel tuo esempio c'è un due punti invece di un punto e virgola tra le regole. – bobince

+0

aha, il genitore, ha mancato quel bit, funziona! Grazie mille. –

4

utilizzando jQuery, si può fare:

$('#parent')[0].scrollWidth 
+0

Estrarre l'elemento zeroth dall'array di elementi jQuery restituisce il nodo DOM, che è identico alla risposta precedente ('document.getElementById ('parent'). ScrollWidth'). Il vantaggio è che 'scrollWidth' può essere fatto ordinatamente senza jQuery. – Hans

Problemi correlati