HTML DOM Element scrollTop egenskab

Definition og brug

scrollTop Egenskab indstiller eller returnerer antallet af pixels, der er rullet vertikalt i elementets indhold.

Se også:

scrollLeft egenskab

CSS overflow-egenskab

onscroll-hændelse

Eksempel

Eksempel 1

Få antallet af pixels, der er rullet i "myDIV" indholdet:

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

prøv det selv

Eksempel 2

Glid indholdet af "myDIV" horisontalt til 50 pixels, vertikalt til 10 pixels:

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

prøv det selv

Eksempel 3

Glid indholdet af "myDIV" horisontalt 50 pixels, vertikalt 10 pixels:

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

prøv det selv

eksempel 4

rul <body>'s indhold horisontalt med 30 pixels og vertikalt med 10 pixels:

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

prøv det selv

eksempel 5

skift mellem klasser på forskellige rullemåder - når brugeren ruller ned 50 pixels fra toppen af siden, tilføjes klassen "test" til elementet (og fjernes igen, når der rulles op):

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

prøv det selv

eksempel 6

når brugeren ruller ned 350 pixels fra toppen af siden, rul en element ind (tilføj slideUp-klassen):

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

prøv det selv

syntaks

tilbageværdi scrollTop-egenskaben:

element.scrollTop

sæt scrollTop-egenskaben:

element.scrollTop = pixels

egenskabsværdi

værdi beskrivelse
pixels

antallet af pixels, der er rullet ned på elementets indhold.

  • hvis dette tal er negativt, sættes dette tal til 0.
  • hvis elementet ikke kan rulles, sættes dette tal til 0.
  • hvis dette tal er større end det tilladte maksimale værdi, sættes dette tal til maksimalværdien.

tilbageværdi

type beskrivelse
nummer antallet af pixels, der er rullet ned på elementets indhold.

browser understøtter

alle browsere understøtter element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support