Proprietà scrollTop dell'Elemento DOM HTML

Definizione e uso

scrollTop Proprietà che imposta o restituisce il numero di pixel di scorrimento verticale del contenuto dell'elemento.

Vedi anche:

Proprietà scrollLeft

Proprietà overflow CSS

Evento onscroll

Esempio

Esempio 1

Ottieni il numero di pixel di scorrimento del contenuto di "myDIV":

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

prova tu stesso

Esempio 2

Spostare il contenuto di "myDIV" di 50 pixel in orizzontale e di 10 pixel in verticale:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

prova tu stesso

Esempio 3

Spostare il contenuto di "myDIV" di 50 pixel in orizzontale e 10 pixel in verticale:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

prova tu stesso

esempio 4

scorri il contenuto di <body> di 30 pixel a destra e 10 pixel in alto:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

prova tu stesso

esempio 5

cambia tra classi in posizioni di scorrimento diverse - quando l'utente scrolla di 50 pixel dal顶端 della pagina verso il basso, la classe "test" viene aggiunta all'elemento (e viene rimossa quando si scorre di nuovo verso l'alto):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

prova tu stesso

esempio 6

quando l'utente scrolla di 350 pixel dal顶端 della pagina verso il basso, far scivolare un elemento (aggiungi la classe slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

prova tu stesso

sintassi

ritorna l'attributo scrollTop:

element.scrollTop

imposta l'attributo scrollTop:

element.scrollTop = pixels

valore dell'attributo

valore descrizione
pixels

il numero di pixel di scorrimento verticale del contenuto dell'elemento.

  • se questo numero è negativo, imposta questo numero a 0.
  • se l'elemento non può essere scrollato, imposta questo numero a 0.
  • se questo numero è maggiore del valore massimo consentito, impostalo come valore massimo.

valore di ritorno

tipo descrizione
numero il numero di pixel di scorrimento verticale del contenuto dell'elemento.

supporto del browser

tutti i browser supportano element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto Supporto