Efecto de Scroll “ScrollPane”

Este es un script de Scroll que le permite agregar un scroll horizontal personalizado para el contenido adicional dentro del bloque.

JavaScript
Para que el script funcione, el fichero index-#.html debe contener estas líneas de código HTML:

El fichero ScrollHorizontalPane.js contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos:

Aquí los atributos de script definen los siguientes valores:

•    scrollbarHeight – la altura de la barra de desplazamiento (scrollbar) generada en píxeles;
•    scrollbarMargin – espacio que se necesita dejar en el lado de la barra de desplazamiento en píxeles;
•    wheelSpeed – la velocidad de desplazamiento de panel en respuesta a la rueda del ratón en píxeles;
•    showArrows – si se muestran las flechas para usuarios de scroll;
•    arrowSize – la altura de los botones de flechas si utiliza true para showArrows;
•    animateTo – animar al llamar scrollTo y scrollBy;
•    dragMinWidth – la anchura mínima para la barra de arrastre;
•    dragMaxWidth –la anchura máxima para la barra de arrastre;
•    animateInterval – el intervalo en milisegundos para actualizar un panel de animación (por defecto100);
•    animateStep – la cantidad para dividir la distancia restante de scroll al animar (por defecto 3);
•    maintainPosition – si desea que el contenido del panel de desplazamiento preserva su posición cuando vuelve a inicializarlo – por lo que no se desplaza si agrega más contenido (por defecto true);
•    resize – activar o desactivar la función de cambiar el tamaño;
•    minimumWidth – la anchura mínima para cambiar el tamaño de jScrollHorizontalPane; se utiliza si la función de cambiar el tamaño está activada;
•    reset – si configurado como true todas las propiedades globales se restablecerán. Esto es útil para actualizaciones dinámicas en la página.

HTML
Ahora se puede revisar una representación de script HTML:

CSS
Usted puede encontrar stylesheet relacionado con script en el fichero style.css principal.