road grass newyork alley fox
try it here now!

Welcome

CustomHTMLscroll is a tiny and easy JavaScript library that gives you the opportunity to add stylable scrollbars to your web pages.

Add CustomHTMLScroll to your page

Include both CustomHTMLScroll.js and scrollbar.css in the head of your HTML page.

<html>
	<head>
		<script src="CustomHTMLScroll.js">
		<link rel="stylesheet" type="text/css" href="scrollbar.css">
	</head>
</html>

Set the height of your block element

This is an important step. The height of the block element that you want to turn in to a scrollpane should be set.

#htmlBlockElement
{
	height:400px;
}

Setup CustomHTMLScroll

The last step is to actually add the scrollbar to the block element, as is shown below.

var htmlBlockElement = document.getElementById( "htmlBlockElement" );
addCustomHTMLScroll( htmlBlockElement );

Styling your scrollbar

This is optional. You can change the color, width etc. of the scrollbar.

.scrollBar
{
	width:10px; /* Set the width of the scrollbar */	
	border-radius:5px; /* Remove if you want square corners*/	
	background-color: #ccc; /* Set the scrollbar color*/	
	transition: opacity 0.3s linear; /* Mouseover delay */	
}