Author: | Mobius1 |
---|---|
Views Total: | 1,331 views |
Official Page: | Go to website |
Last Update: | December 5, 2015 |
License: | MIT |
Preview:

Description:
vanillaScroll is a small vanilla JavaScript plugin which turns a block element into a scrollable area with a custom scrollbar.
Basic usage:
Download and include the vanillaScroll.js on the html page.
<script src="vanillaScroll.js"></script>
Apply the custom scrollbar into a specified container.
var element = document.getElementById('myElement'), options = { // options here }; myScroller = new vanillaScroll(element, options);
Override the default styles for the scrollbar.
.slick-wrapper { position: relative; } .slick-rail { background-color: transparent; height: 100%; position: absolute; right: 0; top: 0; } .slick-bar { background-color: #999; height: 100px; position: absolute; right: 0; cursor: pointer; width: 100%; } .slick-rail.enabled { background-color: #ddd; } .slick-wrapper.hover > .slick-rail { opacity: 0; transition: opacity 250ms ease 1000ms; } .slick-wrapper.hover:hover > .slick-rail { opacity: 1; transition: opacity 250ms; }
Available options.
options = { width: "auto", height: "100%", size: 15, scrollAmount: 10, // the amount to scroll the content with the mouse wheel scrollRate: 20, rail: false, alwaysShow: false, // false = show on hover position: "right" };