Die Position der Bildlaufleiste mit JavaScript abrufen
- Was ist Bildlaufleiste und Bildlaufleistenposition?
-
Ermitteln der Position der Bildlaufleiste mit dem Objekt
windowin JavaScript - Ermitteln der Position der Bildlaufleiste innerhalb eines Elements in JavaScript
In diesem Tutorial besprechen wir, wie Sie die Position der Bildlaufleiste in JavaScript ermitteln, und wir werden Folgendes besprechen:
- Was ist Bildlaufleiste und Bildlaufleistenposition?
- So erhalten Sie die Position der Bildlaufleiste mit dem Objekt
window - So erhalten Sie die Position der Bildlaufleiste innerhalb eines Elements
Was ist Bildlaufleiste und Bildlaufleistenposition?
Eine rechteckige Leiste befindet sich normalerweise am untersten oder ganz rechten Ende des Browserfensters, durch die der Benutzer scrollen kann, was wiederum den Anzeigebereich des Benutzers positioniert. Viele Benutzer verwenden die Bildlaufleiste täglich, da sie auf fast jeder Webseite nach oben und unten scrollen müssen, um mehr Inhalt anzuzeigen.
Die Bildlaufleiste ist die horizontale oder vertikale Position des Sichtbereichs des Fensters, dh wie weit der Benutzer von links oder oben gescrollt hat. Standardmäßig ist die Scroll-Position 0px von links und 0px von oben.
Ermitteln der Position der Bildlaufleiste mit dem Objekt window in JavaScript
Die Position der Bildlaufleiste im Fenster können wir mit dem Objekt window ermitteln. Da das window-Objekt wie jedes andere JavaScript-Objekt ist, können wir einen EventListener hinzufügen, um auf ein scroll-Ereignis zu hören.
window.addEventListener('scroll', (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
this wird in diesem Zusammenhang als window-Objekt bezeichnet. scrollY ist eine Eigenschaft von window, die uns angibt, um wie viele Pixel der Sichtbereich des Fensters von oben gescrollt wurde. scrollX ist eine Eigenschaft des window-Objekts, die uns mitteilt, wie weit der Benutzer von links gescrollt hat.
Ermitteln der Position der Bildlaufleiste innerhalb eines Elements in JavaScript
Es gibt bestimmte Szenarien, in denen Sie die Bildlaufposition nicht des gesamten Fensters, sondern relativ zu einem Element abrufen müssen. Schauen wir uns ein Beispiel dafür an.
<!DOCTYPE html>
<html>
<head>
<style>
#ContentContainer {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 500px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="ContentContainer" onscroll="getScrollPoistion()">
<div id="content">Content to Scroll</div>
</div>
<script>
function getScrollPoistion() {
var ContainerElement = document.getElementById("ContentContainer");
var x = ContainerElement.scrollLeft;
var y = ContainerElement.scrollTop;
console.log(x); // scroll position from Left
console.log(y); // scroll position from top
}
</script>
</body>
</html>
Im obigen Codesegment hat das Element mit der id von ContentContainer die Eigenschaft onscroll; Immer wenn ein Benutzer innerhalb des Elements scrollt, wird die Funktion getScrollPosition ausgeführt.
Was getScrollPosition macht, ist, dass es den Container des Inhaltselements nimmt und die Position, an der es von links gescrollt wurde, und dann die von oben gescrollte Position erhält.