HTML DOM Element scrollTop-attribut

Definition och användning

scrollTop Inställning eller returnering av antalet pixlar för vertikal rullning av elementets innehåll.

Se också:

scrollLeft-attribut

CSS overflow-egenskap

onscroll-händelse

Exempel

Exempel 1

Hämta antalet pixlar för att skrolla innehållet i "myDIV":

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

prova själv

Exempel 2

Skrolla innehållet i "myDIV" horisontellt till 50 pixlar, vertikalt till 10 pixlar:

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

prova själv

Exempel 3

Skrolla innehållet i "myDIV" horisontellt 50 pixlar, vertikalt 10 pixlar:

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

prova själv

exempel 4

rulla innehållet i <body> horisontellt 30 pixlar och vertikalt 10 pixlar:

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

prova själv

exempel 5

växla mellan klassnamn vid olika rullningspositioner - när användaren rullar 50 pixlar ned från sidans topp, läggs klassnamnet "test" till i elementet (och tas bort när användaren rullar upp igen):

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 själv

exempel 6

när användaren rullar 350 pixlar ned från sidans topp in i ett element (lägg till slideUp-klassen):

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

prova själv

syntaks

returnera scrollTop-egenskapen:

element.scrollTop

ställ in scrollTop-egenskapen:

element.scrollTop = pixels

egenskapsvärde

värde beskrivning
pixels

antal pixlar som elementets innehåll rullar vertikalt.

  • om detta tal är negativt, sätt detta tal till 0.
  • om elementet inte kan rulla, sätt detta tal till 0.
  • om detta tal är större än det tillåtna maximala värdet, sätt detta tal till maxvärdet.

returvärde

typ beskrivning
nummer antal pixlar som elementets innehåll rullar vertikalt.

webbläsarstöd

alla webbläsare stöder element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd Stöd