La proprietà Element.scrollTop ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.

Il valore scrollTop di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto visibile più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore scrollTop è 0.

Sui sistemi che usano il ridimensionamento del display, scrollTop può darti un valore decimale.

Sintassi

// Get the number of pixels scrolled.
var intElemScrollTop = someElement.scrollTop;

Dopo aver eseguito questo codice, intElemScrollTop è un numero intero corrispondente al numero di pixel che il contenuto dell'element è stato fatto scorrere verso l'alto.

// Set the number of pixels scrolled.
element.scrollTop = intValue;

scrollTop può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:

  • Se l'elemento non può essere scrollato (ad es. Non ha overflow o se l'elemento ha una proprietà di "non-scrollable"), scrollTop è 0.
  • scrollTop non risponde ai valori negativi; invece, si riporta su 0.
  • Se impostato su un valore superiore al massimo disponibile per l'elemento, scrollTop si assesterà sul valore massimo.

Esempio

padding-top

If you can see this, scrollTop = 0

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If you can see this, scrollTop is > 0

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If you can see this, scrollTop is maxed-out

padding-bottom

Left Top Right Bottom margin-top margin-bottom border-top border-bottom

Specifiche

Specifica Stato Commento
CSS Object Model (CSSOM) View Module
The definition of 'scrollTop' in that specification.
Working Draft

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 43Edge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support 43Edge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev, NicolaCastellaniTB
Ultima modifica di: IsibisiDev,