Barra de desplazamiento personalizada elegante para contenedor DIV-Sheepbar. js

Vista prévia

Descripción

Sheepbar. js es una solución de barra de desplazamiento personalizada de JavaScript puro que anexa una barra de desplazamiento simple y fácil de estilo a su elemento DIV que contiene contenido web grande.

Funcionamiento

Coloque el archivo principal de JavaScript Sheepbar. js en el documento:

<script src="sheepbar.js"></script>

Inicializar el Sheepbar y ya está listo para ir.

var Sheepbar = new Sheepbar();

Agregue la clase CSS ' sheepbar ' a su contenedor DIV desplazable.

<div class="sheepbar">

...
</div>

Desactive/habilite las barras de desplazamiento horizontales & verticales.

<div class="sheepbar"


 data-x="true"



data-y="true">

...
</div>

Personalice la barra de desplazamiento en el CSS como se muestra abajo:

.sheepbar>.sheepbar-scrollbar>div {

width: 100%;

height: 96%;

top: 2%;

bottom: 2%;

left: 0;

position: absolute;

border-radius: 6px;

background: #34495e;

opacity: 0.52;

transition: opacity 0.2s;

cursor: pointer;
}

.sheepbar>.sheepbar-scrollbar.sheepbar-x>div {

width: 96%;

height: 100%;

right: 2%;

bottom: 0;

left: 2%;
}

.sheepbar>.sheepbar-scrollbar>div:hover, .sheepbar>.sheepbar-scrollbar>div:active { opacity: 0.88; }

.sheepbar>.sheepbar-scrollbar.sheepbar-x {

height: 6px;

bottom: 2px;
}

.sheepbar>.sheepbar-scrollbar.sheepbar-y {

width: 6px;

right: 2px;
}

.sheepbar .sheepbar-content {

padding: 0 12px 0 12px;
}

Opciones de personalización disponibles y funciones de devolución de llamada.

var Sheepbar = new Sheepbar({



// CSS position


position: 'relative',



// Callbacks


callback_scroll: function(){},


callback_mousedown: function(){},


callback_mouseup: function(){},


callback_mousemove: function(){},


callback_resize: function(){}



});