Scroll infinito en un menú vertical

No es difícil añadir un scroll infinito a un menú de opciones que tengas en HTML en tu sitio web.

A continuación, te mostramos un ejemplo, cortesía de nuestra amigo Vincent Orback (que publicó en Codepen) donde puedes ver uno en acción.

El truco del scroll infinito

Con unas pocas líneas de javascript puro (menos de 5kb de peso), obramos la magia. El secreto del scroll infinito no es muy complicado que digamos.

Colocamos unos cuantos items dentro de un menú que tendremos que clonar tantas veces como tengamos en el espacio visible que queramos para lograr la ilusión del scroll.

Esta ilusión funciona así: una vez que hacemos scroll y llegamos a los items clonados, reseteamos la posición del scroll a 0 de forma suave. Así, tan pronto alcanzamos el final del espacio visual, pegamos un salto al comienzo.

En nuestra mano está no hacer esto brusco.

¿Cuántos items necesitamos clonar? Pues justo los necesarios para rellenar toda el área visible de nuestro menú. Por ejemplo, si dentro de nuestro «viewport» del menú caben 8 items, necesitamos 8 clones.

La cantidad de items del menú es importante cuando consideremos cuánto espacio neceistaremos para rellenar la pantalla, (o el área de scroll, claro).

Si tus items no rellenan toda el área, el scroll infinito no funcionará bien. Asegúrate, por favor, de tener todo el espacio cubierto ya sea ajustando la altura, el font-size o lo que necesites.

Truco: si quieres ver la ilusión, asegúrate de que la barra de scroll no esté oculta. Verás que salta desde el final hasta arriba una vez se alcance la zona “clonada”. Solo borra:

::-webkit-scrollbar {
  display: none;
}

… y para Mozilla Firefox, la línea scrollbar-width: none;

¡Esperamos que este recurso te resulte útil! Vistoso lo es mucho.

Puedes encontrar una demo del scroll funcionando en este enlace.

Descarga los ficheros fuente en este enlace.