Obtenga la posición de la barra de desplazamiento con JavaScript
- ¿Qué es la barra de desplazamiento y la posición de la barra de desplazamiento?
-
Obtener la posición de la barra de desplazamiento usando el objeto
windowen JavaScript - Obtener la posición de la barra de desplazamiento dentro de un elemento en JavaScript
En este tutorial, discutiremos cómo obtener la posición de la barra de desplazamiento en JavaScript, y discutiremos:
- ¿Qué es la barra de desplazamiento y la posición de la barra de desplazamiento?
- Cómo obtener la posición de la barra de desplazamiento usando el objeto
window - Cómo obtener la posición de la barra de desplazamiento dentro de un elemento
¿Qué es la barra de desplazamiento y la posición de la barra de desplazamiento?
Una barra de forma rectangular suele estar en el extremo inferior o más a la derecha de la ventana del navegador por la que el usuario puede desplazarse, lo que a su vez posiciona el área de visualización del usuario. Muchos usuarios utilizan la barra de desplazamiento a diario porque necesitan desplazarse hacia arriba y hacia abajo en casi todas las páginas web para ver más contenido.
La barra de desplazamiento es la posición horizontal o vertical del área de visualización de la ventana, lo que significa cuánto se ha desplazado el usuario desde la izquierda o la parte superior. Por defecto, la posición de desplazamiento es 0px desde la izquierda y 0px desde la parte superior.
Obtener la posición de la barra de desplazamiento usando el objeto window en JavaScript
Podemos obtener la posición de la barra de desplazamiento en la ventana usando el objeto window. Dado que el objeto window es como cualquier otro objeto JavaScript, podemos agregar un EventListener para escuchar un evento scroll.
window.addEventListener('scroll', (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
this en este contexto se denomina objeto window. scrollY es una propiedad de window que nos dice el número de píxeles que el área de visualización de la ventana se ha desplazado desde la parte superior. scrollX es una propiedad del objeto window que nos dice cuánto se ha desplazado el usuario desde la izquierda.
Obtener la posición de la barra de desplazamiento dentro de un elemento en JavaScript
Hay ciertos escenarios en los que necesitaría obtener la posición de desplazamiento no de toda la ventana, sino relativa a un elemento. Echemos un vistazo a un ejemplo de cómo hacer esto.
<!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>
En el segmento de código anterior, el elemento que tiene el id de ContentContainer tiene una propiedad de onscroll; siempre que un usuario se desplaza dentro del elemento, se ejecuta la función getScrollPosition.
Lo que hace getScrollPosition es que toma el contenedor del elemento de contenido y obtiene la posición en la que se ha desplazado desde la izquierda, y luego obtiene la posición desplazada desde la parte superior.