HTML DOM Element scrollTop -ominaisuus

Määrittely ja käyttö

scrollTop Aseta tai palauta elementin sisällön vertikaalisen liikkumisen kuvapisteksiä.

Katso myös:

scrollLeft -ominaisuus

CSS overflow-ominaisuus

onscroll-tapahtuma

Esimerkki

Esimerkki 1

Hanki pyöriä "myDIV" sisällön kuvapisteksiä:

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

kokeile itse

Esimerkki 2

Aseta "myDIV" sisällön horisontaalinen liikkuminen 50 kuvapistettä ja vertikaalinen liikkuminen 10 kuvapistettä:

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

kokeile itse

Esimerkki 3

Aseta "myDIV" sisällön horisontaalinen liikkuminen 50 kuvapistettä ja vertikaalinen liikkuminen 10 kuvapistettä:

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

kokeile itse

esimerkki 4

vieraile <body>-elementin sisältöä horisontaalisesti 30 pistettä ja pystysuuntaisesti 10 pistettä:

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

kokeile itse

esimerkki 5

vaihda eri vierityspositioiden luokkien välillä - kun käyttäjä vierittää sivun ylältä alas 50 pistettä, luokka "test" lisätään elementtiin (ja poistetaan, kun vieritetään taas ylös):

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

kokeile itse

esimerkki 6

kun käyttäjä vierittää sivun ylältä alas 350 pistettä, siirrä ylös yksi elementti (lisää slideUp-luokka):

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

kokeile itse

syntaksi

palauta scrollTop-ominaisuus:

element.scrollTop

aseta scrollTop-ominaisuus:

element.scrollTop = pisteitä

ominaisuusarvo

arvo kuvaus
pisteitä

elementin sisällön pystysuuntaisen vierityksen pisteitä.

  • jos tämä luku on negatiivinen, tämä luku asetetaan 0:ksi.
  • jos elementti ei voi vierittää, tämä luku asetetaan 0:ksi.
  • jos tämä luku on suurempi kuin sallittu enimmäismäärä, aseta tämä luku enimmäismääräksi.

palautusarvo

tyyppi kuvaus
luku elementin sisällön pystysuuntaisen vierityksen pisteitä.

selaimen tuki

kaikki selaimet tukevat element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki Tuki