Biblioteca de barra de desplazamiento personalizada ligera flexible-yaSimpleScrollbar

Vista prévia

Descripción

Una biblioteca JavaScript de barra de desplazamiento personalizada sencilla, flexible y ligera que admite eventos de desplazamiento del explorador nativos y permite cambiar el tamaño dinámicamente para ajustarse al contenedor.

Install it via NPM.

# NPM
$ npm install ya-simple-scrollbar

Funcionamiento

Importe la biblioteca yaSimpleScrollbar al proyecto Web.

<script src="ya-simple-scrollbar.min.js"></script>

Adjunte una barra de desplazamiento personalizada a su contenido desplazable de la siguiente forma:

simpleScrollbar.attach(document.getElementById('container'));

Reemplace los estilos como se muestra a continuación en el archivo CSS para los estilos personalizados.

var cssText = [


'.yass-wrapper { overflow: hidden; height: 100%; position: relative; z-index: 1; }',


'.yass-content { height: 100%; width: 100%; padding: 0 40px 0 0; position: relative; overflow-y: scroll; -moz-box-sizing: content-box; box-sizing: content-box; }',


'.yass-sensor { width: 100%; display: block; position: relative; }',


'.yass-scrollbar { position: absolute; background: rgba(127, 127, 127, 0.1); top: 0; right: 0; z-index: 2; width: 8px; height: 100%; cursor: pointer; opacity: 0; transition: opacity 0.1s linear; }',


'.yass-scrollbar-button { position: absolute; left: 0; width: 8px; border-radius: 4px; background: rgba(127, 127, 127, 0.2); }',


'.yass-wrapper:hover .yass-scrollbar, .yass-scrollbar.yass-scrollbar-drag { opacity: 1; }',


'.yass-resize-sensor, .yass-resize-sensor-expand, .yass-resize-sensor-shrink { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; z-index: -1; visibility: hidden; }',


'.yass-resize-sensor-expand .yass-resize-sensor-child { width: 100000px; height: 100000px; }',


'.yass-resize-sensor-shrink .yass-resize-sensor-child { width: 200%; height: 200%; }',


'.yass-resize-sensor-child { position: absolute; top: 0; left: 0; transition: 0s; }',

]