Flexible Lightweight Custom Scrollbar Library – yaSimpleScrollbar

Preview:

Description:

A simple, flexible, lightweight custom scrollbar JavaScript library that supports native browser scroll events and allows to dynamically resize to fit the container.

Install it via NPM.

# NPM
$ npm install ya-simple-scrollbar

How to use it:

Import the yaSimpleScrollbar library into your web project.

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

Attach a custom scrollbar into your scrollable content as follow:

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

Override styles as displayed below in your css file for custom styles.

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; }',
  ]