Bazen, bir öğeyi veya sayfayı kaydırırken kaydırma çubuğunun konumunu almak isteyebiliriz.

Bu makalede, JavaScript ile kaydırma çubuğu konumunun nasıl alınacağına bakacağız.

Bir Öğenin scrollTop Özelliğini Kullanma

scrollTopKaydırma nedeniyle gizlenen piksel sayısını elde etmemize izin vermek için bir öğenin özelliğini kullanabiliriz .

Böylece kaydırma çubuğunun konumunu elde etmek için bunu kullanabiliriz.

Örneğin aşağıdaki HTML'yi yazabiliriz:

<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);
})

Daha sonra öğeleri document.createElementoluşturmak için çağırarak div'e 100 p öğesi ekliyoruz .

Ve textContentmülkü ayarlayarak her birinin içeriğini belirliyoruz .

Daha sonra yöntemle onu div'e ekliyoruz div.appendChild.

Sonra, çağrı window.addEventListenerile 'scroll'kaydırma olayı dinlemek için ilk argüman olarak dize.

Ve sonra , öğenin ne kadar aşağı kaydırıldığını görmek için scrollTopözelliğini documentElementalabiliriz html.

scrollTopDiğer elementlerin özelliklerini de alabiliriz .

Örneğin, bizde varsa:

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

Sonra scrolldiv olayını yazarak dinleyebiliriz :

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);
})

Ancak div olayını dinlemek div.addEventListeneryerine çağırıyoruz .window.addEventListenerscroll

Ardından div.scrollTop, div'in ne kadar aşağı kaydırıldığını gösteren özelliği elde ederiz .

Pencere Nesnesinin scrollY Özelliğini Kullanma

Ayrıca window.scrollYkaydırma çubuğunun piksel cinsinden ne kadar aşağısına ulaşmamıza izin veren özellik de var .

Örneğin, yazarak kullanabiliriz:

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);
})

Sonuç

JavaScript ile kaydırma çubuğu konumunu elde etmenin birkaç yolu vardır.

Plainenglish.io adresinde daha fazla içerik