Barra de desplazamiento personalizable con desplazamiento suave-barra de desplazamiento suave

Vista prévia

Descripción

Smooth-ScrollBar es una biblioteca de JavaScript que se utiliza para crear una barra de desplazamiento personalizable y de rendimiento con efectos de desplazamiento suave para el contenido desplazable.

Installation & Download:

# NPM
$ npm install smooth-scrollbar --save

Funcionamiento

Cargue los ' Smooth-ScrollBar. css ' y ' Smooth-ScrollBar. js ' requeridos en la página HTML.

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

Cree un área desplazable de la siguiente manera:

<section scrollbar>

Scrollable content goes here
</section>

<!-- Or -->
<section data-scrollbar>

Scrollable content goes here
</section>

<!-- Or -->
<scrollbar>

Scrollable content goes here
</scrollbar>

Hágalo desplazable cuando el contenido interno sea mayor que su contenedor principal.

section {

width: 500px;

height: 300px;

overflow: auto;
}

Anexar una barra de desplazamiento personalizada al área desplazable.

Scrollbar.initAll();

Opciones posibles con valores predeterminados.

Scrollbar.initAll({


// Momentum reduction damping factor, a float value between (0, 1)

damping: .1


// Minimal size for scrollbar thumb.

thumbMinSize: 20,


// Render scrolling by integer pixels

renderByPixels: true,


// Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge.

 // When set to 'auto', it will be enabled on nested scrollbars, and disabled on first-class scrollbars.

continuousScrolling: 'auto',


// Keep scrollbar tracks always visible.

alwaysShowTracks: false,


// Element to be used as a listener for mouse wheel scroll events.

 // By default, the container element is used.

wheelEventTarget: null,


// plugins

plugins: {}


});

API methods.

// Init scrollbar on given element, and returns scrollbar instance
Scrollbar.init( element, [options] )

// Automatically init scrollbar on all elements refer to selector scrollbar, [scrollbar], [data-scrollbar], returns an array of scrollbars collection:
Scrollbar.initAll( [options] )

// Check if scrollbar exists on given element:
Scrollbar.has( element )

// Get scrollbar on the given element, if no scrollbar instance exsits, return undefined:
Scrollbar.get( element )

// Return an array that contains all scrollbar instances:
Scrollbar.getAll()

// Remove scrollbar on the given element, same as scrollbar#destroy() method.
Scrollbar.destroy( element )

// Remove all scrollbar instances.
Scrollbar.destroyAll()

// Attaches plugins to scrollbars.
Scrollbar.use()

// Attaches default style sheets to current document.
 Scrollbar.attachStyle()

// Removes default styles from current document.
 Scrollbar.detachStyle()

Registro de cambios

v8.3.1 (08/18/2018)

• Se han añadido más opciones
• Bugfixed