Elegant Themeable Custom Scrollbars – OverlayScrollbars

Category: Javascript , Recommended | July 14, 2018
Author: KingSora
Views Total: 431
Official Page: Go to website
Last Update: July 14, 2018
License: MIT

Preview:

Elegant Themeable Custom Scrollbars – OverlayScrollbars

Description:

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.

How to use it:

Install the OverlayScrollbars via NPM.

# NPM
$ npm install overlayscrollbars --save

Import the OverlayScrollbars module.

// ES 6
import OverlayScrollbars from 'overlayscrollbars';

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

Import the core stylesheet and a theme CSS into the page.

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

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

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

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

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

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

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

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

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

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

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

Apply the custom scrollbars to the scrollable containers. Available themes:

  • os-theme-dark: built-in
  • os-theme-light: built-in
  • os-theme-minimal-dark
  • os-theme-minimal-light
  • os-theme-thin-dark
  • os-theme-thin-light
  • os-theme-thick-dark
  • os-theme-thick-light
  • os-theme-round-dark
  • os-theme-round-light
  • os-theme-block-dark
  • os-theme-block-light
var instance = OverlayScrollbars(document.getElementsByTagName('body'), {
    className       : "os-theme-dark" 
});

var instance2 = OverlayScrollbars(document.getElementById('demo'), {
   className       : "os-theme-round-dark",
   resize          : "both",
    sizeAutoCapable : true,
    paddingAbsolute : true 
});

More customization options.

{

  // 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()

Changelog:

v1.5.1 (07/14/2018)

Leave a Reply