Indicador desplazable para los elementos anchos-scroll-sugerencia

Vista prévia

Descripción

Scroll-Hint es una biblioteca JavaScript ligera y fácil de usar que muestra un icono de punto para indicar que el elemento actual se puede desplazar horizontalmente.

También tiene la capacidad de agregar clases CSS personalizadas al elemento desplazable dependiendo del estado actual.

Útil para mostrar una tabla HTML amplia en el dispositivo móvil que no hay suficiente espacio para mostrar todas las columnas.

Funcionamiento

Instale la biblioteca de sugerencias de desplazamiento.

# Yarn
$ yarn add scroll-hint

# NPM
$ npm install scroll-hint --save

Utilice la sugerencia de desplazamiento como un módulo.

import ScrollHint from 'scroll-hint';

O incluir directamente los archivos JavaScript y CSS de la sugerencia de desplazamiento en la página.

<link rel="stylesheet" href="scroll-hint.css">
<script src="scroll-hint.js"></script>

Inserte la tabla HTML ancha en un contenedor DIV.

<div class="js-scrollable">

<table class="table">


<tbody>



...


</tbody>

</table>
</div>

Inicializar la biblioteca de sugerencias de desplazamiento y listo.

new ScrollHint('.js-scrollable');

Las clases CSS predeterminadas agregadas a la tabla desplazable.

new ScrollHint('.js-scrollable',{


suggestClass: 'is-active',


scrollableClass: 'is-scrollable',


scrollableRightClass: 'is-right-scrollable',


scrollableLeftClass: 'is-left-scrollable',


scrollHintClass: 'scroll-hint',


scrollHintIconClass: 'scroll-hint-icon',


scrollHintIconAppendClass: '', // 'scroll-hint-icon-white'


scrollHintIconWrapClass: 'scroll-hint-icon-wrap',


scrollHintText: 'scroll-hint-text',
});

Especifique la duración del icono de sugerencia de desplazamiento.

new ScrollHint('.js-scrollable',{


remainingTime: 2000 // default: -1
});

Añada un efecto de sombra al contorno del elemento si es desplazable.

new ScrollHint('.js-scrollable',{


suggestiveShadow: true // default: false
});

Más opciones de configuración.

new ScrollHint('.js-scrollable',{


scrollHintBorderWidth: 10,


enableOverflowScrolling: true,


applyToParents: false,


i18n: {



scrollable: 'scrollable'


}
});

Registro de cambios

11/12/2018

• corregir el error invisible de sombra al usar iOS