24 de octubre de 2022

Desplazamiento

El evento scroll permite reaccionar al desplazamiento de una pÃ¡gina o elemento. Hay bastantes cosas buenas que podemos hacer aquÃ.

Por ejemplo:

Mostrar/ocultar controles o informaciÃ³n adicional segÃºn el lugar del documento en el que se encuentre el/la usuario/a.
Cargar mÃ¡s datos cuando el/la usuario/a se desplaza hacia abajo hasta el final del documento.

AquÃ hay una pequeÃ±a funciÃ³n para mostrar el desplazamiento actual:

          window.addEventListener('scroll', function() {
  document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
});
        

In action:

Desplazamiento actual = Desplazamiento de la ventana

El evento scroll funciona tanto en window como en los elementos desplazables.

Evitar el desplazamiento

Â¿QuÃ© hacemos para que algo no se pueda desplazar?

No podemos evitar el desplazamiento utilizando event.preventDefault() oyendo al evento onscroll, porque este se activa despuÃ©s de que el desplazamiento haya ocurrido.

Pero podemos prevenir el desplazamiento con event.preventDefault() en un evento que cause el desplazamiento, por ejemplo en el evento keydown para pageUp y pageDown.

Si aÃ±adimos un manejador de eventos a estos eventos y un event.preventDefault() en el manejador, entonces el desplazamiento no se iniciarÃ¡.

Hay muchas maneras de iniciar un desplazamiento, la mÃ¡s fiable es usar CSS, la propiedad overflow.

AquÃ hay algunas tareas que puede resolver o revisar para ver aplicaciones de onscroll.

Tareas

PÃ¡gina sin fin

Crear una pÃ¡gina interminable. Cuando un visitante la desplace hasta el final, se auto-aÃ±adirÃ¡ la fecha y hora actual al texto (asÃ el visitante podrÃ¡ seguir desplazÃ¡ndose)

AsÃ:

Por favor tenga en cuenta dos caracterÃsticas importantes del desplazamiento:

El scroll es â€œelÃ¡sticoâ€. En algunos navegadores/dispositivos podemos desplazarnos un poco mÃ¡s allÃ¡ del inicio o final del documento (se muestra un espacio vacÃo abajo, y luego el documento â€œrebotaâ€ automÃ¡ticamente a la normalidad).
El scroll es impreciso. Cuando nos desplazamos hasta el final de la pÃ¡gina, podemos estar de hecho como a 0-50px del fondo del documento real.

AsÃ que, â€œdesplazarse hasta el finalâ€ deberÃa significar que el visitante no estÃ¡ a mÃ¡s de 100px del final del documento.

P.D. En la vida real podemos querer mostrar â€œmÃ¡s mensajesâ€ o â€œmÃ¡s bienesâ€.

Abrir un entorno controlado para la tarea.

El nÃºcleo de la soluciÃ³n es una funciÃ³n que aÃ±ade mÃ¡s fechas a la pÃ¡gina (o carga mÃ¡s cosas en la vida real) mientras estamos en el final de la pÃ¡gina.

Podemos llamarlo inmediatamente o agregarlo como un manejador de window.onscroll.

La pregunta mÃ¡s importante es: â€œÂ¿CÃ³mo detectamos que la pÃ¡gina se desplaza hasta el fondo?â€

Usaremos las coordenadas de la ventana.

El documento estÃ¡ representado (y contenido) dentro de la etiqueta <html>, que es document.documentElement.

Podemos obtener las coordenadas relativas a la ventana de todo el documento como document.documentElement.getBoundingClientRect(), la propiedad bottom serÃ¡ la coordenada relativa a la ventana del fondo del documento.

Por ejemplo, si la altura de todo el documento es 2000px, entonces:

          // cuando estamos en la parte superior de la pÃ¡gina
//  window-relative top = 0    (relativo a la ventana,  lÃ­mite superior = 0 )
document.documentElement.getBoundingClientRect().top = 0

// window-relative bottom = 2000    (relativo a la ventana, lÃ­mite inferior = 2000)
// el documento es largo, asÃ­ que probablemente estÃ© mÃ¡s allÃ¡ del fondo de la ventana
document.documentElement.getBoundingClientRect().bottom = 2000
        

Si nos desplazamos 500px abajo, entonces:

          // la parte superior del documento estÃ¡ 500px por encima de la ventana
document.documentElement.getBoundingClientRect().top = -500
// la parte inferior del documento estÃ¡ 500px mÃ¡s cerca
document.documentElement.getBoundingClientRect().bottom = 1500
        

Cuando nos desplazamos hasta el final, asumiendo que la altura de la venta es 600px:

          // La parte superior del documento estÃ¡ 1400px sobre la ventana
document.documentElement.getBoundingClientRect().top = -1400
// la parte inferior del documento estÃ¡ a 600px debajo de la ventana
document.documentElement.getBoundingClientRect().bottom = 600
        

Tened en cuenta que el fondo del documento bottom nunca puede ser 0, porque nunca llega a la parte superior de la ventana. El lÃmite mÃ¡s bajo de la coordenada bottom es la altura de la ventana (asumimos que es 600), no podemos desplazarla mÃ¡s hacia arriba.

Podemos obtener la altura de la ventana con document.documentElement.clientHeight.

Para nuestra tarea, necesitamos saber cuando tenemos el final del documento a unos 100px (esto es: 600-700px, si la altura es de 600).

AsÃ que aquÃ estÃ¡ la funciÃ³n:

          function populate() {
  while(true)
  {
    // final del documento
    let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;

    // si el usuario no se ha desplazado lo suficiente (> 100px hasta el final)
    if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
      // vamos aÃ±adir mÃ¡s datos
      document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
  }
}
        

Abrir la soluciÃ³n en un entorno controlado.

BotÃ³n para subir/bajar

Crea un botÃ³n â€œir arribaâ€ para ayudar con el desplazamiento de la pÃ¡gina.

DeberÃa funcionar asÃ:

Mientras que la pÃ¡gina no se desplace hacia abajo al menos la altura de la ventanaâ€¦ es invisible.
Cuando la pÃ¡gina se desplaza hacia abajo mÃ¡s que la altura de la ventana â€“ aparece una flecha â€œhacia arribaâ€ en la esquina superior izquierda. Si la pÃ¡gina se desplaza hacia atrÃ¡s desaparece.
Cuando se hace click en la flecha, la pÃ¡gina se desplaza hacia arriba hasta el tope.

AsÃ (esquina superior izquierda, desplÃ¡cese para ver):

Abrir un entorno controlado para la tarea.

Abrir la soluciÃ³n en un entorno controlado.

Cargar imÃ¡genes visibles

Digamos que tenemos un cliente con baja velocidad de conexiÃ³n y queremos cuidar su tarifa de datos.

Para ello decidimos no mostrar las imÃ¡genes inmediatamente, sino sustituirlas por marcadores de posiciÃ³n, como este:

<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">

AsÃ que, inicialmente todas las imÃ¡genes son placeholder.svg. Cuando la pÃ¡gina se desplaza a la posiciÃ³n donde el usuario puede ver la imagen â€“ cambiamos src a data-src, y asÃ la imagen se carga.

AquÃ hay un ejemplo en iframe:

DesplÃ¡zate para ver las imÃ¡genes cargadas â€œbajo demandaâ€.

Requerimientos:

Cuando la pÃ¡gina se carga, las imÃ¡genes que estÃ¡n en pantalla deben cargarse inmediatamente, antes de cualquier desplazamiento.
Algunas imÃ¡genes pueden ser regulares, sin data-src. El cÃ³digo no debe tocarlas.
Una vez que una imagen se carga, no debe recargarse mÃ¡s cuando haya desplazamiento arriba/abajo.

P.D. Si puedes, haz una soluciÃ³n mÃ¡s avanzada para â€œprecargarâ€ las imÃ¡genes que estÃ¡n mÃ¡s abajo/despuÃ©s de la posiciÃ³n actual.

Post P.D. SÃ³lo se debe manejar el desplazamiento vertical, no el horizontal.

Abrir un entorno controlado para la tarea.

TambiÃ©n queremos que se ejecute cuando se cargue la pÃ¡gina, para detectar las imÃ¡genes visibles inmediatamente y cargarlas.

El cÃ³digo deberÃa ejecutarse cuando se cargue el documento, para que tenga acceso a su contenido.

O ponerlo en la parte inferior del <body>:

          // ...el contenido de la pÃ¡gina estÃ¡ arriba...

function isVisible(elem) {

  let coords = elem.getBoundingClientRect();

  let windowHeight = document.documentElement.clientHeight;

  // Â¿El borde superior del elemento es visible?
  let topVisible = coords.top > 0 && coords.top < windowHeight;

  // Â¿El borde inferior del elemento es visible?
  let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
}

La funciÃ³n showVisible() utiliza el control de visibilidad, implementado por isVisible(), para cargar imÃ¡genes visibles:

          function showVisible() {
  for (let img of document.querySelectorAll('img')) {
    let realSrc = img.dataset.src;
    if (!realSrc) continue;

    if (isVisible(img)) {
      img.src = realSrc;
      img.dataset.src = '';
    }
  }
}

showVisible();
window.onscroll = showVisible;
        

P.D. La soluciÃ³n tiene una variante de isVisible que â€œprecargaâ€ imÃ¡genes que estÃ¡n dentro de 1 pÃ¡gina por encima/debajo del desplazamiento del documento actual.

Abrir la soluciÃ³n en un entorno controlado.

Mapa del Tutorial

Comentarios

lea esto antes de comentarâ€¦

Desplazamiento

Evitar el desplazamiento

Tareas

PÃ¡gina sin fin

BotÃ³n para subir/bajar

Cargar imÃ¡genes visibles

Comentarios

CapÃtulo

NavegaciÃ³n de lecciÃ³n

Evitar el desplazamiento

Tareas

PÃ¡gina sin fin

BotÃ³n para subir/bajar

Cargar imÃ¡genes visibles

Comentarios

CapÃ­tulo

NavegaciÃ³n de lecciÃ³n

CapÃtulo