El evento scroll se dispara cuando cambiamos alguna de las barras de desplazamiento horizontal o vertical.
Este evento nos puede ser útil si tenemos que hacer alguna actividad cuando modificamos la parte del documento que vemos en nuestra navegador. Veamos con un ejemplo como disponer un cartel en la parte superior de la pantalla y que siempre este visible indistintamente que hagamos scroll de pantalla.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id="mensaje">Título siempre visible.</div>
<p>Línea 1.</p>
<p>Línea 2.</p>
<p>Línea 3.</p>
<p>Línea 4.</p>
<p>Línea 5.</p>
<p>Línea 6.</p>
<p>Línea 7.</p>
<p>Línea 8.</p>
<p>Línea 9.</p>
<p>Línea 10.</p>
<p>Línea 11.</p>
<p>Línea 12.</p>
<p>Línea 13.</p>
<p>Línea 14.</p>
<p>Línea 15.</p>
<p>Línea 16.</p>
<p>Línea 17.</p>
<p>Línea 18.</p>
<p>Línea 19.</p>
<p>Línea 20.</p>
<p>Línea 21.</p>
<p>Línea 22.</p>
<p>Línea 23.</p>
<p>Línea 24.</p>
<p>Línea 25.</p>
<p>Línea 26.</p>
<p>Línea 27.</p>
<p>Línea 28.</p>
<p>Línea 29.</p>
<p>Línea 30.</p>
<p>Línea 31.</p>
<p>Línea 32.</p>
<p>Línea 33.</p>
<p>Línea 34.</p>
<p>Línea 35.</p>
<p>Línea 36.</p>
<p>Línea 37.</p>
<p>Línea 38.</p>
<p>Línea 39.</p>
<p>Línea 40.</p>
<script src="funciones.js"></script>
</body>
</html>
estilos.css
#mensaje {
position: absolute;
top: 0px;
left: 0px;
color: #000;
width: 1024px;
height: 50px;
background-color: #ff0;
text-align: center;
font-family: arial;
font-size: 30px;
}
funciones.js
window.addEventListener('scroll', () => {
let mensaje = document.getElementById("mensaje")
mensaje.style.top = window.scrollY + "px"
})
La función más importante es la que se dispara cuando hacemos scroll en nuestro navegador:
window.addEventListener('scroll', () => {
let mensaje = document.getElementById("mensaje")
mensaje.style.top = window.scrollY + "px"
})
Para conocer cual es el valor de scroll vertical la propiedad windows tiene un atributo llamado scrollY que contiene el valor en píxeles de desplazamiento vertical.
Tengamos en cuenta que si queremos recuperar el valor de scroll horizontal tenemos la propiedad:
window.scrollX