Atribut scrollTop DOM Element HTML

Definisi dan penggunaan

scrollTop Atribut menetapkan atau mengembalikan jumlah pixel geser konten vertikal elemen.

Lihat pula:

Atribut scrollLeft

Properti overflow CSS

Peristiwa onscroll

Contoh

Contoh 1

Ambil pixel yang digeser konten 'myDIV':

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

coba sendiri

Contoh 2

Menggeser konten horizontal 'myDIV' ke 50 piksel, menggeser vertikal ke 10 piksel:

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

coba sendiri

Contoh 3

Menggeser konten horizontal 'myDIV' sebesar 50 piksel, menggeser vertikal sebesar 10 piksel:

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

coba sendiri

contoh 4

gerak konten <body> berputar horisontal 30 piksel, vertikal 10 piksel:

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

coba sendiri

contoh 5

berubah-ubah kelas di posisi berbeda penataan - ketika pengguna menggulir turun dari atas halaman 50 piksel, kelas "test" akan ditambahkan ke elemen (dan dihapus lagi saat menggulir naik):

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

ketika pengguna menggulir turun dari atas halaman 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

kembalikan atribut scrollTop:

element.scrollTop

atur atribut scrollTop:

element.scrollTop = pixels

nilai atribut

nilai deskripsi
pixels

jumlah piksel penataan konten elemen berputar vertikal.

  • jika angka ini negatif, atur angka ini ke 0.
  • jika elemen ini tidak dapat berputar, atur angka ini ke 0.
  • jika angka ini lebih besar daripada nilai maksimum yang diizinkan, atur angka ini ke nilai maksimum.

nilai kembalian

tipe deskripsi
angka jumlah piksel penataan konten elemen berputar vertikal.

dukungan peramban

semua peramban mendukung element.scrollTop：

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