Biblioteca de JavaScript de Performant Custom ScrollBar-SimpleBar

Vista prévia

Descripción

SimpleBar es una biblioteca de JavaScript sencilla e independiente que anexa un Custom ScrollBar a cualquier contenedor desplazable que tenga contenido desbordante. Funciona con CSS overflow: auto propiedad y mantiene el comportamiento de desplazamiento nativo.

Funcionamiento

Instale el SimpleBar e impórtelo en el proyecto Web.

# NPM
$ npm install simplebar --save

// ES 6
import SimpleBar from 'simpleBar';

O incluir directamente los archivos JavaScript y CSS de SimpleBar en la página HTML.

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

Agregue el atributo ' Data-simplebar ' al contenedor desplazable y listo.

<div data-simplebar id="demo">

content here
</div>

.demo {

height: 300px;

width: 400px;

overflow: hidden;
}

Para inicializar el Simplebar manualmente:

new SimpleBar(document.getElementById('demo'))

Para la configuración de Simplebar, reemplace las opciones como se muestra a continuación y pase el objeto como segundo parámetro a la función ' Simplebar '.

new SimpleBar(document.getElementById('demo'), {


autoHide: true,


forceVisible: false,


classNames: {



resizeWrapper: 'simplebar-resize-wrapper',



content: 'simplebar-content',



offset: 'simplebar-offset',



mask: 'simplebar-mask',



wrapper: 'simplebar-wrapper',



placeholder: 'simplebar-placeholder',



scrollbar: 'simplebar-scrollbar',



track: 'simplebar-track',



heightAutoObserverWrapperEl: 'simplebar-height-auto-observer-wrapper',



heightAutoObserverEl: 'simplebar-height-auto-observer',



visible: 'simplebar-visible',



horizontal: 'simplebar-horizontal',



vertical: 'simplebar-vertical',



hover: 'simplebar-hover',



dragging: 'simplebar-dragging'


},


scrollbarMinSize: 25,


scrollbarMaxSize: 0,


direction: 'ltr',


timeout: 1000
})

API methods.

myInstance = new SimpleBar(document.getElementById('demo'), {

// options here
})

// recalculates the height/width of content
myInstance.recalculate();

// gets scroll element
myInstance.getScrollElement();

// gets content element
myInstance.getContentElement();

// removes observer
myInstance.removeObserver();

Registro de cambios

04/15/2019

• v4.0

01/17/2019

• solución: Quite los oyentes de DOM que faltan en desmontar

01/14/2019

• arreglo: Fix Vue plugin tests que no pasan

11/19/2018

• arreglo: capture eventos de puntero en lugar de burbujear

11/14/2018

• Corrija el error ' visible ' de className cuando utilice nombres de clase personalizados

11/02/2018

• corregir el cálculo de posición de la barra de desplazamiento incorrecta cuando la pista tiene relleno

10/16/2018

• Agregue nombres de clase ' visible ', ' horizontal ' y ' vertical ' a las opciones

08/19/2018

• La manija de la corrección no es arrastrable en IE/Edge

08/10/2018

• Corregir la barra de desplazamiento horizontal falta la misma lógica como vertical uno

08/01/2018

• Forzar la barra de desplazamiento que se mostrará cuando se ha roncado;

v3.0.0beta (07/15/2018)

• actualizar