 |
Evento scroll (DOM)
Evento scroll (DOM)
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.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
window.addEventListener('scroll',cambioScroll,false);
}
function cambioScroll(e)
{
var mensaje = document.getElementById("mensaje");
mensaje.style.top = document.body.scrollTop;
}
</script>
<style>
#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;
}
</style>
</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>
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
window.addEventListener('scroll',cambioScroll,false);
}
function cambioScroll(e)
{
var mensaje = document.getElementById("mensaje");
mensaje.style.top = document.body.scrollTop;
}
La función más importante es la que se dispara cuando hacemos scroll en nuestro navegador:
function cambioScroll(e)
{
var mensaje = document.getElementById("mensaje");
mensaje.style.top = document.body.scrollTop;
}
Para conocer cual es el valor de scroll vertical la propiedad body del objeto document contiene la propiedad scrollTop. Este valor se lo asignamos a nuestro div.
Tengamos en cuenta que si queremos recuperar el valor de scroll horizontal tenemos la propiedad:
document.body.scrollLeft