Barra de desplazamiento personalizada con estilo en JavaScript puro-MiniBar

Vista prévia

Descripción

MiniBar es una biblioteca de JavaScript pura que le permite crear barras de desplazamiento personalizadas utilizando sus propias clases CSS. Basado en el MutationObserver API.

Admite tanto el contenedor desplazable como todo el documento. También se puede utilizar como un indicador de progreso a medida que se desplaza hacia abajo el contenido Web.

Funcionamiento

Instale el minibar a través de gestores de paquetes.

# NPM
$ npm install minibarjs

# Bower
$ bower install minibarjs

Importe los minibarjs a su proyecto o incluya directamente los archivos JavaScript y CSS en la Página Web.

<link rel="stylesheet" href="minibar.min.css">
<script src="minibar.min.js"></script>

Inicialice el MiniBarjs en el contenedor de destino.

new MiniBar('#myContent');

Estilo de la barra de desplazamiento personalizada en el CSS.

.mb-track { border-radius: 5px; }

.mb-bar { background-color: #4C9689; }

body > .mb-container > .mb-track {

background-color: #110c10;

border-radius: 5px;
}

Propiedades de configuración predeterminadas.

new MiniBar('#myContent',{



// or progress


barType: "default",



// min size


minBarSize: 10,



// always shows scrollbars


alwaysShowBars: false,



// enables horizontal/vertical scrollbars


scrollX: true,


scrollY: true,



// shows nav buttons


navButtons: false,



// scroll amount in pixels


scrollAmount: 10,





// MutationObserver API


mutationObserver: {



attributes: false,



childList: true,



subtree: true


},



// default classes


classes: {



container: "mb-container",



content: "mb-content",



track: "mb-track",



bar: "mb-bar",



visible: "mb-visible",



progress: "mb-progress",



hover: "mb-hover",



scrolling: "mb-scrolling",



textarea: "mb-textarea",



wrapper: "mb-wrapper",



nav: "mb-nav",



btn: "mb-button",



btns: "mb-buttons",



increase: "mb-increase",



decrease: "mb-decrease",



item: "mb-item",



itemVisible: "mb-item-visible",



itemPartial: "mb-item-partial",



itemHidden: "mb-item-hidden"


}

});

Funciones de devolución de llamada.

new MiniBar('#myContent',{



onInit: function() {},


onUpdate: function() {},


onStart: function() {},


onScroll: function() {},


onEnd: function() {},

});

API methods.

// scrolls to a specific point
instance.scrollTo(position, axis);

// scrolls the content by a certain amount
instance.scrollBy(amount, axis, duration, easing);

// recalculates scollbar sizes and positions
instance.update();

// destroys the scrollbar
instance.destroy();

Registro de cambios

v0.4.0 (11/20/2018)

• Añadido el método scrollTo ()
• Añadida la opción observableItems (requiere compatibilidad con IntersectionObserver)
• Añadida la opción hideBars
• Se agregaron las opciones onInit, onUpdate y onScroll

11/10/2018

• v0.3.3: Update track positions

09/29/2018

• v0.3.2: disconnect observer on destroy