Lightweight Vanilla JS Custom HTML Slider | FakeScroll

FakeScroll is the Vanilla JavaScript version of the dummy scrolling jQuery plugin that makes the browser’s regular scroll bar fully customizable via CSS.

custom html slider, html slider with 2 handles, image slider in html, slider html css

How to make use of it:

Download and import the fakescroll library into the doc.

<link rel="stylesheet" href="fakescroll.css">
<script src="fakescroll.js"></script>

Initialize the fakescroll in your scrollable component.

<div class="example">
  Long Content Here

Apply your personal CSS types to the scrollbar.

.example {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  min-height: 70%;
  height: 1px;
  width: 500px;
  overflow: auto;
  background: white;

.example.fakeScroll__scope { background: none; }

.example .fakeScroll__content {
  padding-top: 1em;
  padding-bottom: 1em;

.example .fakeScroll__wrap {
  background: #FFF;
  border-radius: 4px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

Enable/disable the scrollbar observe.

  track: true

Add an additional CSS class to the scrollbar.

  classname: 'your-own-class'

Minimal Custom Scrollbar, FakeScroll Plugin/Github

See Demo And Download

Official Website(yairEO): Click Here

This superior jQuery/javascript plugin is developed by yairEO. For extra Advanced usage, please go to the official website.