Elegante Themeable personalizado ScrollBars-OverlayScrollbars

Vista prévia

Descripción

OverlayScrollbars is a JavaScript library used to create elegant, customizable and themeable scrollbars on any scrollable elements. Available in Vanilla JavaScript and also can be used as a jQuery plugin.

Funcionamiento

Instale OverlayScrollbars a través de NPM.

# NPM
$ npm install overlayscrollbars --save

Importe el módulo OverlayScrollbars.

// ES 6
import OverlayScrollbars from 'overlayscrollbars';

// CommonJS:
const OverlayScrollbars = require('overlayscrollbars');

Importe la hoja de estilos principal y un CSS de tema a la página.

<!-- Main -->
<link href="css/OverlayScrollbars.css" rel="stylesheet">

<!-- round dark -->
<link href="css/os-tema-redondo-oscuro.css" rel="stylesheet">

<!-- round light -->
<link href="css/os-tema-redondo-luz.css" rel="stylesheet">

<!-- block dark -->
<link href="css/os-tema-bloque-Dark.css" rel="stylesheet">

<!-- block light -->
<link href="css/os-tema-bloque-luz.css" rel="stylesheet">

<!-- minimal dark -->
<link href="css/os-theme-minimalista-Dark.css" rel="stylesheet">

<!-- minimal light -->
<link href="css/os-tema-minimal-Light.css" rel="stylesheet">

<!-- thick dark -->
<link href="css/os-tema-grueso-oscuro.css" rel="stylesheet">

<!-- thick light -->
<link href="css/os-tema-espesor-luz.css" rel="stylesheet">

<!-- thin dark -->
<link href="css/os-tema-delgado-oscuro.css" rel="stylesheet">

<!-- thin light -->
<link href="css/os-tema-luz delgada.css" rel="stylesheet">

Aplique las barras de desplazamiento personalizadas a los contenedores desplazables. Temas disponibles:

• os-tema-oscuro: Built-in
• os-tema-luz: Built-in
• os-theme-minimalista-Dark
• os-tema-minimal-Light
• os-tema-delgado-oscuro
• os-tema-luz delgada
• os-tema-grueso-oscuro
• os-tema-espesor-luz
• os-tema-redondo-oscuro
• os-tema-redondo-luz
• os-tema-bloque-Dark
• os-tema-bloque-luz

var instance = OverlayScrollbars(document.getElementsByTagName('body'), {


className


 : "os-theme-dark"
 });

var instance2 = OverlayScrollbars(document.getElementById('demo'), {

 className


 : "os-tema-redondo-oscuro",

 resize




: "both",


sizeAutoCapable : true,


paddingAbsolute : true
 });

Más opciones de personalización.

{


// none || both
|| horizontal || vertical || n || b || h || v

resize : 'none',










// true || false

sizeAutoCapable : true,






 // true || false

clipAlways : true,









// true || false

normalizeRTL : true,








// true || false

paddingAbsolute : false,






// true || false || null

autoUpdate : null,









// number

autoUpdateInterval : 33,





// These options are only respected if the native scrollbars are overlaid.


nativeScrollbarsOverlaid : {


showNativeScrollbars : false,
 //true || false


initialize : true






 //true || false

},


// Defines how the overflow should be handled for each axis

overflowBehavior : {



// visible-hidden
|| visible-scroll || hidden || scroll || v-h || v-s || h || s


x : 'scroll',



 // visible-hidden
|| visible-scroll || hidden || scroll || v-h || v-s || h || s


y : 'scroll'


},


// Defines the behavior of the custom scrollbars.

scrollbars : {


visibility : 'auto',

//visible || hidden || auto || v || h || a


autoHide : 'never',

 //never || scroll || leave || n || s || l


autoHideDelay : 800,

//number


dragScrolling : true,
 //true || false


clickScrolling : false, //true || false


touchSupport : true

 //true || false

},


// Defines special behavior of textarea elements.

textarea : {


dynWidth : false,
//true || false


dynHeight : false
//true || false

}


}

API methods.

// adds new options
instance.options(optionName, optionValue)

// updates scrollbars
instance.update([force])

// puts the instance to sleep
instance.sleep()

// returns the current scroll information.
instance.scroll()

// sets the scroll position.
instance.scroll(coordinates [, duration] [, easing] [, complete])

// stops the current scroll-animation.
instance.scrollStop()

// returns all relevant elements.
instance.getElements()

// returns a object which describes the current state of this instance.
instance.getState()

// removes scrollbars from DOM
instance.destroy()

Registro de cambios

02/01/2019

• v1.6.3

12/17/2018

• v1.6.1

11/08/2018

• v1.5.3

10/23/2018

• Elimine el uso del método depcreated. hover ()

09/09/2018

• v1.5.2