Aprende a usar la biblioteca ScrollHint para mostrar una sugerencia en elementos desplazables horizontalmente.

Mostrando una pista para sugerir que los elementos se pueden desplazar horizontalmente con ScrollHint en JavaScript

Las interfaces de usuario horribles conducen a experiencias de usuario horribles. Cuando usamos un producto, nos encanta poder usarlo sin ningún tutorial previo, ¿verdad? A veces, cuando algunas funciones básicas, como desplazarse o arrastrar y soltar, no son tan intuitivas, nos faltarán ideas sobre cómo movernos en la aplicación. Uno de los problemas más comunes está en las tablas, que para el usuario no son totalmente visibles horizontalmente, pero no saben que es desplazable.

Es por eso que queremos compartir contigo una biblioteca de JavaScript útil que te ayudará a sugerir al usuario con un div flotante simple que los elementos se pueden desplazar horizontalmente, con el ícono del puntero.

1. Incluya ScrollHint

Para mostrar esta sugerencia al usuario, nos basaremos en la biblioteca de JavaScript ScrollHint. Esta biblioteca sugiere al usuario que los elementos se pueden desplazar horizontalmente, con un icono de puntero. Para agregar esta biblioteca a tu proyecto, deberás agregar una referencia en tu documento al archivo CSS:

<link rel="stylesheet" href="scroll-hint.css">

Y el código fuente de JavaScript:

<script src="scroll-hint.min.js"></script>

Recuerda que puedes obtener la última versión de la biblioteca aquí . Para obtener más información sobre esta biblioteca, visita el repositorio oficial en Github aquí .

2. Habilitando Sugerencia

Como primer paso, debes tener una tabla en la que puedas desplazarse horizontalmente. Si no tienes ninguno para probar, puedes usar el siguiente HTML que generará una tabla desplazable horizontal (ten en cuenta que incluye una regla CSS que puedes omitir si usa un framework como bootstrap, usando table-responsive en su lugar):

<style>
    .js-scrollable{
        /* Permitir desplazamiento horizontal en tabla */
        overflow-x: auto;
    }
</style>
<div class="js-scrollable">
    <table>
        <tbody>
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
                <th>Puntos</th>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>Delgado</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>Delgado</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>Delgado</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>Delgado</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Carlos</td>
                <td>Delgado</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
            </tr>
        </tbody>
    </table>
</div>

Luego, todo lo que necesitas hacer es inicializar la pista con el siguiente código:

new ScrollHint('.js-scrollable');

El método espera como primer argumento un selector CSS, cuya selección tendrá adjunta la sugerencia de desplazamiento. Eso es básicamente todo lo que necesitas hacer para mostrar la pista.

3. Opciones adicionales

El complemento permite personalizar algunas propiedades a través de un objeto simple que puedes recibir las siguientes propiedades:

NOMBRE DEFECTO DESCRIPCIÓN
suggestClass está activo Nombre de clase que se agregará cuando el elemento se desplaza hacia adentro
scrollableClass es desplazable Nombre de clase que se agregará cuando el elemento sea desplazable
scrollableRightClass es-desplazable a la derecha Nombre de clase que se agregará cuando el elemento se pueda desplazar hacia la derecha
scrollableLeftClass es desplazable a la izquierda Nombre de clase que se agregará cuando el elemento se pueda desplazar hacia la izquierda
scrollHintClass pista de desplazamiento Nombre de clase que se agregará al elemento
scrollHintIconClass icono de pista de desplazamiento Nombre de clase que se agregará al icono
scrollHintIconAppendClass icono de pista de desplazamiento blanco Otro nombre de clase que se agregará al icono del elemento
scrollHintIconWrapClass scroll-hint-icon-wrap Nombre de clase que se agregará al contenedor del icono
scrollHintText texto de sugerencia de desplazamiento Nombre de clase que se agregará al texto
remainingTime -1 Cuándo ocultar el icono de sugerencia de desplazamiento (ms)
scrollHintBorderWidth 10 Ancho del borde de la caja de sombra del elemento
enableOverflowScrolling cierto Cuando se usa iOS y el valor es verdadero, la
propiedad -webkit-overflow-scrolling se agregará al elemento
suggestiveShadow falso Mostrar sombra sugerente, cuando el elemento es desplazable
applyToParents falso Aplicar JavaScript al elemento padre
i18n.scrollable desplazable Puede cambiar el texto desplazable desde aquí
NOMBRE DEFECTO DESCRIPCIÓN
suggestClass está activo Nombre de clase que se agregará cuando el elemento se desplaza hacia adentro
scrollableClass es desplazable Nombre de clase que se agregará cuando el elemento sea desplazable
scrollableRightClass es-desplazable a la derecha Nombre de clase que se agregará cuando el elemento se pueda desplazar hacia la derecha
scrollableLeftClass es desplazable a la izquierda Nombre de clase que se agregará cuando el elemento se pueda desplazar hacia la izquierda
scrollHintClass pista de desplazamiento Nombre de clase que se agregará al elemento
scrollHintIconClass icono de pista de desplazamiento Nombre de clase que se agregará al icono
scrollHintIconAppendClass icono de pista de desplazamiento blanco Otro nombre de clase que se agregará al icono del elemento
scrollHintIconWrapClass scroll-hint-icon-wrap Nombre de clase que se agregará al contenedor del icono
scrollHintText texto de sugerencia de desplazamiento Nombre de clase que se agregará al texto
remainingTime -1 Cuándo ocultar el icono de sugerencia de desplazamiento (ms)
scrollHintBorderWidth 10 Ancho del borde de la caja de sombra del elemento
enableOverflowScrolling cierto Cuando se usa iOS y el valor es verdadero, la
propiedad -webkit-overflow-scrolling se agregará al elemento
suggestiveShadow falso Mostrar sombra sugerente, cuando el elemento es desplazable
applyToParents falso Aplicar JavaScript al elemento padre
i18n.scrollable desplazable Puede cambiar el texto desplazable desde aquí

Por ejemplo, si deseas cambiar el texto de la sugerencia de desplazamiento cuando el usuario ve la tabla, puede especificarlo así:

new ScrollHint('.js-scrollable', {
	i18n: {
        scrollable: 'Deslice hacia la derecha'
    }
});

Este complemento agregará solo una huella de 5 KB en tu proyecto, incluidos CSS y JavaScript.

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores