Terkadang, kami mungkin ingin mendapatkan posisi scrollbar saat menggulir elemen atau halaman.

Pada artikel ini, kita akan melihat bagaimana mendapatkan posisi scrollbar dengan JavaScript.

Menggunakan Properti scrollTop dari sebuah Elemen

Kita dapat menggunakan scrollTopproperti elemen untuk membiarkan kita mendapatkan jumlah piksel yang disembunyikan karena pengguliran.

Jadi kita bisa menggunakan ini untuk mendapatkan posisi scrollbar.

Misalnya, kita dapat menulis HTML berikut:

<div>
</div>

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
window.addEventListener('scroll', (e) => {
  console.log(document.documentElement.scrollTop);
})

Kemudian kami menambahkan elemen 100 p ke dalam div dengan memanggil document.createElementuntuk membuat elemen.

Dan kami mengatur konten masing-masing dengan mengatur textContentproperti.

Kemudian kami menambahkannya ke div dengan div.appendChildmetode.

Selanjutnya, kami memanggil window.addEventListenerdengan 'scroll'string sebagai argumen pertama untuk mendengarkan acara gulir.

Dan kemudian kita bisa mendapatkan scrollTopproperti dari documentElementuntuk mengetahui seberapa jauh htmlelemen telah di-scroll ke bawah.

Kita juga bisa mendapatkan scrollTopproperti elemen lainnya.

Misalnya, jika kita memiliki:

<div style='height: 300px; overflow-y: auto'>
</div>

Kemudian kita bisa mendengarkan scrollevent div dengan menulis:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
div.addEventListener('scroll', (e) => {
  console.log(div.scrollTop);
})

Tapi kami memanggil div.addEventListeneralih-alih window.addEventListenermendengarkan scrollacara div.

Kemudian kita mendapatkan div.scrollTopproperti untuk mengetahui seberapa jauh div telah menggulir ke bawah.

Menggunakan Properti scrollY dari Objek jendela

Ada juga window.scrollYproperti untuk memberi tahu kita seberapa jauh scrollbar dalam piksel.

Misalnya, kita dapat menggunakannya dengan menulis:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
window.addEventListener('scroll', (e) => {
  console.log(window.scrollY);
})

Kesimpulan

Ada beberapa cara yang bisa kita gunakan untuk mendapatkan posisi scrollbar dengan JavaScript.

Lebih banyak konten di plainenglish.io