https://github.com/myterminal/faded-scrollbar

A simple skinnable scrollbar for web
https://github.com/myterminal/faded-scrollbar

html5 scrollbar

Last synced: 3 months ago
JSON representation

A simple skinnable scrollbar for web

• Host: GitHub
• URL: https://github.com/myterminal/faded-scrollbar
• Owner: myTerminal
• License: mit
• Created: 2016-08-07T11:12:45.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-08-19T05:10:34.000Z (almost 4 years ago)
• Last Synced: 2026-03-20T22:06:35.275Z (4 months ago)
• Topics: html5, scrollbar
• Language: JavaScript
• Size: 196 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# faded-scrollbar

[![npm version](https://badge.fury.io/js/faded-scrollbar.svg)](https://badge.fury.io/js/faded-scrollbar)

[![npm downloads](https://img.shields.io/npm/dt/faded-scrollbar.svg)](https://www.npmjs.com/package/faded-scrollbar)

[![Bower version](https://badge.fury.io/bo/faded-scrollbar.svg)](https://badge.fury.io/bo/faded-scrollbar)

[![License](https://img.shields.io/github/license/myTerminal/ample-alerts.svg)](https://opensource.org/licenses/MIT)  

[![Build Status](https://travis-ci.org/myTerminal/faded-scrollbar.svg?branch=master)](https://travis-ci.org/myTerminal/faded-scrollbar)

[![Code Climate](https://codeclimate.com/github/myTerminal/faded-scrollbar.png)](https://codeclimate.com/github/myTerminal/faded-scrollbar)

[![Coverage Status](https://img.shields.io/coveralls/myTerminal/faded-scrollbar.svg)](https://coveralls.io/r/myTerminal/faded-scrollbar?branch=master)  

[![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)

A simple skinnable scrollbar for web

## Features

* An easy to use custom scrollbar that works out of the box with a simple function invocation.

* Can be easily themed for any host application

## How to Use

Include `faded-scrollbar.min.js` script file and `fade-scrollbar.css` stylesheet along with jQuery in the HTML page.

Set the dimensions (especially the height) of the element on which you want the scrollbar to appear.

Instantiate a scrollbar on the element as below:

    scrollbar = new FadedScrollbar("#container");

When the content inside the element changes (addition or removal of content), just invoke `refresh()` on the scrollbar as

    scrollbar.refresh();

When the scrollbar is no longer required, call a `destroy()` on the scrollbar and the original markup will be brought back.

    scrollbar.destroy();

## Demo

You can view a demo [here](https://myterminal.github.io/faded-scrollbar/example/)

## Dependency

* [jQuery](https://www.npmjs.com/package/jquery)

## To-do

* Scroll buttons

* Scrolling with dragger

* Touch events