Sifat scrollTop DOM HTML Element

Definisi dan penggunaan

scrollTop Sifat setting atau mengembalikan bilangan pixel gerakan kandungan vertikal elemen.

Lihat juga:

Sifat scrollLeft

Properti overflow CSS

Peristiwa onscroll

Contoh

Contoh 1

Dapatkan bilangan pixel gerakan kandungan 'myDIV':

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

Coba sendiri

Contoh 2

Tolongkan kandungan 'myDIV' bergerak lurus ke 50 pixel, bergerak menegak ke 10 pixel:

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

Coba sendiri

Contoh 3

Tolongkan kandungan 'myDIV' bergerak lurus 50 pixel, bergerak menegak 10 pixel:

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

Coba sendiri

Contoh 4

Ggerakkan konten <body> secara horizontal 30 piksel, secara vertikal 10 piksel:

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

Coba sendiri

Contoh 5

Beralih antara kelas berbeda di posisi gerakan - saat pengguna menggerakkan halaman dari atas ke bawah 50 piksel, kelas "test" akan ditambahkan ke elemen (dan dihapus saat digerakkan kembali ke atas):

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

Coba sendiri

Contoh 6

Saat pengguna menggerakkan halaman dari atas ke bawah 350 piksel, masukkan elemen (tambahkan kelas slideUp):

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

Coba sendiri

Sintaks

Kembalian atribut scrollTop:

element.scrollTop

Atur atribut scrollTop:

element.scrollTop = pixels

Nilai atribut

Nilai Deskripsi
pixels

Jumlah piksel penarikan vertikal konten elemen.

  • Jika bilangan ini adalah negatif, bilangan ini diatur ke 0.
  • Jika elemen ini tidak dapat digerakkan, bilangan ini diatur ke 0.
  • Jika bilangan ini melebihi nilai maksimum yang diizinkan, bilangan ini diatur ke nilai maksimum.

Kembalian nilai

Tipe Deskripsi
Angka Jumlah piksel penarikan vertikal konten elemen.

Dukungan pelayar

Semua pelayar web mendukung element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan