Manchmal möchten wir möglicherweise die Position der Bildlaufleiste ermitteln, wenn wir auf einem Element oder einer Seite scrollen.

In diesem Artikel erfahren Sie, wie Sie die Position der Bildlaufleiste mit JavaScript ermitteln.

Verwenden der scrollTop-Eigenschaft eines Elements

Wir können die scrollTopEigenschaft eines Elements verwenden, um die Anzahl der Pixel zu ermitteln, die beim Scrollen ausgeblendet werden.

Damit können wir die Position der Bildlaufleiste ermitteln.

Zum Beispiel können wir den folgenden HTML schreiben:

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

Dann fügen wir dem div 100 p Elemente hinzu, indem wir aufrufen document.createElement, um die Elemente zu erstellen.

Und wir legen den Inhalt jedes einzelnen fest, indem wir die textContentEigenschaft festlegen .

Dann hängen wir es mit der div.appendChildMethode an das div an .

Als nächstes rufen wir window.addEventListenermit der 'scroll'Zeichenfolge als erstem Argument auf, um das Bildlaufereignis abzuhören.

Und dann können wir die scrollTopEigenschaft von abrufen documentElement, um zu ermitteln, wie weit das htmlElement nach unten gescrollt hat.

Wir können auch die scrollTopEigenschaft anderer Elemente erhalten.

Zum Beispiel, wenn wir haben:

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

Dann können wir uns das scrollEreignis des Div anhören, indem wir schreiben:

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

Aber wir rufen an, div.addEventListeneranstatt window.addEventListenerauf das scrollEreignis des Div zu hören .

Dann erhalten wir die div.scrollTopEigenschaft, um zu ermitteln, wie weit der Div nach unten gescrollt hat.

Verwenden der scrollY-Eigenschaft des Fensterobjekts

Es gibt auch die window.scrollYEigenschaft, mit der wir feststellen können, wie weit die Bildlaufleiste in Pixel ist.

Zum Beispiel können wir es verwenden, indem wir schreiben:

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

Fazit

Es gibt verschiedene Möglichkeiten, wie wir die Position der Bildlaufleiste mit JavaScript ermitteln können.

Weitere Inhalte auf plainenglish.io