Właściwość scrollTop elementu HTML DOM

Definicja i użycie

scrollTop Ustawia lub zwraca liczbę pikseli przesunięcia zawartości elementu w pionie.

Zobacz również:

Właściwość scrollLeft

Atrybut overflow CSS

Zdarzenie onscroll

Przykład

Przykład 1

Pobierz liczbę pikseli przesunięcia zawartości "myDIV":

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

spróbuj sam

Przykład 2

Przesuń zawartość "myDIV" w poziomie do 50 pikseli, w pionie do 10 pikseli:

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

spróbuj sam

Przykład 3

Przesuń zawartość "myDIV" w poziomie o 50 pikseli, w pionie o 10 pikseli:

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

spróbuj sam

przykład 4

przewiń zawartość <body> w poziomie o 30 pikseli, w pionie o 10 pikseli:

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

spróbuj sam

przykład 5

przełączanie między nazwami klas na różnych pozycjach przewijania - gdy użytkownik przewija w dół od góry strony o 50 pikseli, nazwa klasy "test" zostanie dodana do elementu (i usunięta po ponownym przewinięciu w górę):

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

spróbuj sam

przykład 6

gdy użytkownik przewija w dół od góry strony o 350 pikseli, wślizg elementu (dodaj klasę slideUp):

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

spróbuj sam

gramatyka

zwróć atrybut scrollTop:

element.scrollTop

ustawienie atrybutu scrollTop:

element.scrollTop = pixels

wartość atrybutu

wartość opis
pixels

liczba pikseli wertykalnego przewijania zawartości elementu.

  • jeśli liczba ta jest ujemna, liczba ta ustawiana jest na 0.
  • jeśli element nie może być przewijany, liczba ta ustawiana jest na 0.
  • jeśli liczba ta jest większa niż dozwolona maksymalna wartość, ustaw tę liczbę na wartość maksymalną.

zwrócona wartość

typ opis
liczba liczba pikseli wertykalnego przewijania zawartości elementu.

obsługa przeglądarki

wszystkie przeglądarki wspierają element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie