Properti scrollX Window

Definisi dan penggunaan

scrollX properti mengembalikan pixel yang bergerak dari kiri atas jendela dokumen.

scrollX properti adalah hanya-baca.

Tanda

scrollX setara dengan properti properti

Untuk kompatibilitas browser, gunakan properti. window.pageXOffset dalam tempat: window.scrollX.

Lihat pula:

Properti pageXOffset

Properti pageYOffset

Contoh

Contoh 1

Gulir konten 100 pixel, dan tampilkan scrollX dan scrollY:

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

Coba sendiri

Contoh 2

Buat navigasi yang lepas:

// Mendapatkan navigasi
const navbar = document.getElementById("navbar");
// Mendapatkan posisi offset navigasi
const sticky = navbar.offsetTop;
// Menambahkan kelas 'sticky' ke navigasi saat Anda mencapai posisi penarikan, dan menghapus kelas 'sticky' saat Anda meninggalkan posisi penarikan.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Coba sendiri

Sintaks

window.scrollX

atau:

scrollX

Nilai kembalian

Tipe Deskripsi
Angka Pixel yang bergerak dari kiri atas jendela dokumen.

Dukungan Peramban

Semua peramban mendukungnya window.scrollX：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan