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. scrollTopnon risponde ai valori negativi; invece, si riporta su0.- 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 = 0Lorem 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 > 0Duis 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-outpadding-bottom
Specifiche
| Specifica | Stato | Commento |
|---|---|---|
| CSS Object Model (CSSOM) View Module The definition of 'scrollTop' in that specification. |
Working Draft |
Compatibilità con i browser
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Basic support | Chrome Full support 43 | Edge Full support Yes | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 43 | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support