Scroll boxes
Il titolo forse non è dei più immediati, ma vorrei presentare delle proprietà degli elementi HTML utilizzabili con Javascript per creare degli scroller personalizzabili o automatici ( classico box delle news a scorrimento continuo ) o quant'altro preveda il movimento di un blocco scrollabile.
Innanzitutto presentiamo le proprietà degli elementi HTML che utilizzeremo negli script.
clientHeight
Proprietà in sola lettura che ritorna il numero di pixels dell'altezza interna di un elemento, incluso il padding ma escluse l'altezza della scrollbar, del bordo o del margine.
-
var element = document.getElementById(id);
-
var height = element.clientHeight;
clientWidtht
È il corrispettivo di clientHeight ma per la larghezza interna di un elemento.
-
var widht = element.clientWidtht;
scrollHeight
È una proprietà in sola lettura che restituisce il numero di pixels dell'altezza di un elemento relativa al layout, quindi comprensiva di padding e bordi.
-
var scrollHeight = element.scrollHeight;
scrollWidth
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
-
var scrollWidth = element.scrollWidth;
scrollTop
È una proprietà in lettura e scrittura che può assumere un valore qualsiasi intero positivo rappresentate la distanza in pixel tra il lato superiore e la prima parte visibile dell'elemento countenuto.
-
var scrollTop = element.scrollTop;
scrollLeft
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.
-
var scrollLeft = element.scrollLeft;
Schema riassuntivo
Note: le proprietà presentate sino ad ora sono state introdotto dal object model di MSIE, quindi non sono nè una specifica nè una raccomanandazione W3C. In ogni caso sono implementate anche dal render Gecko ( Firefox, Mozilla, Netscape, etc. )
Queste proprietà si applicano a numerosi elementi, per avere maggiori dettagli consultate pure la MSDN DHTML library
Commenta