Biblioteca de barra de desplazamiento personalizable ligera-Optiscroll

Vista prévia

Descripción

Optiscroll es una biblioteca de JavaScript ligera y altamente personalizable que se utiliza para crear barras de desplazamiento horizontales y/o verticales personalizadas mientras se conservan los comportamientos de desplazamiento nativos.

Más características

• Eventos personalizados.
• Suavizar scrollTo y scrollIntoView animaciones.
• Soporta tanto el navegador como el área desplazable.

Instalación

# NPM
$ npm install optiscroll --save

¿Cómo funciona?

Enlace a los archivos de JavaScript y StyleSheet de Optiscroll como este:

<link rel="stylesheet" href="dist/optiscroll.css">
<script src="dist/scrollbar.js"></script>

Envolver el contenido en un contenedor desplazable con la clase CSS de ' optiscroll '.

<div id="demo" class="optiscroll">

...
</div>

Anexar una barra de desplazamiento personalizada al área desplazable.

var myScrollbar = new Optiscroll(document.getElementById('demo'));

Opciones de personalización predeterminadas.

var myScrollbar = new Optiscroll(document.getElementById('demo'), {



// Prevents scrolling parent container (or body) when scroll reach top or bottom.


 // Works also on iOS preventing the page bounce.


preventParentScroll: false,



// Use custom scrollbars also on iOS, Android and OSX (w/ trackpad)


forceScrollbars: false,



// Time before presuming that the scroll is ended, then fire scrollstop event


scrollStopDelay: 300,



// Maximum size (width or height) of the track.


maxTrackSize: 95,



// Minimum size (width or height) of the track.


minTrackSize: 5,



// Allow track dragging to scroll


draggableTracks: true,



// Scrollbars will be automatically updated on size or content changes


autoUpdate: true,



// Custom class prefix for optiscroll elements


classPrefix: 'optiscroll-',



// Optiscroll will generate an element to wrap your content. If not, the first child will be used


wrapContent: true,



// Optiscroll will automatically detect if the content is rtl, however you can force it if the detection fails


rtl: false



 });

El método para desplazar el contenido a un punto específico dentro del área que se puede reunir.

// destX: number (px), left, right, false
// destY: number (px), top, bottom, false
// duration: number (ms), auto
myScrollbar.scrollTo(destX, destY, duration);

El método para desplazar el contenido a la vista.

// element: DOM node, jQuery element, string (selector)
// duration: number (ms), auto
// delta: number (px), object with top, left, right, bottom numbers
myScrollbar.scrollIntoView (elem, duration, delta);

Eventos personalizados.

• sizechange: cambia clientWidth/clientHeight del elemento optiscroll, o cambia el ancho de desplazamiento/la altura de desplazamiento del área de desplazamiento
• scrollstart: el usuario comienza a desplazarse
• Scroll: el usuario se desplaza. Este evento ya está limitado, se desencadena en consecuencia con el scrollMinUpdateInterval valor.
• scrollstop: el usuario deja de desplazarse. El tiempo de espera antes de disparar este evento se define mediante la opción scrollStopDelay
• scrollreachedge: el usuario se desplaza a cualquier borde (superior/izquierda/derecha/inferior)
• scrollreachtop: el usuario se desplaza a la parte superior
• scrollreachbottom: el usuario se desplaza a la parte inferior
• scrollreachleft: el usuario se desplaza hacia la izquierda
• scrollreachright: el usuario se desplaza a la derecha

Registro de cambios

08/20/2018

• v3.2.1: Fix incorrect setting check