dhteumeuleu » Skinned HTML Scrollbar

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/scrollbarStyle.html
Updated: January 19, 2010 – implemented setCapture() so that dragging and mouse events work outside the window !
Inspiration: fleXcroll: Cross Browser Custom ScrollBar script
Coding expectations:
- Minimal raw Javascript code
- No CSS hack, no browsers workarounds
- No funky mousewheel and keyboard event: hook browser’s native scroolbars
- Skins positionned by CSS, not JS: NO lag on resize
- Zero CPU cycle when idle – no setInterval loop
Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Skinned DHTML Scrollbar - Interactive DHTML art-demos</title> 
<meta name="author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #222; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		pointer: default; 
	} 
	#screen { 
		position: absolute; 
		left: 5%; 
		height: 50%; 
		top: 5%; 
		width: 90%; 
		overflow: auto; 
		background: #000; 
		color: #fff; 
	} 
	#screen2 { 
		position: absolute; 
		left: 5%; 
		height: 35%; 
		width: 90%; 
		top: 60%; 
		overflow: auto; 
		background: #111; 
		color: #fff; 
	} 
	.content { 
		position:relative; 
		font-size: 0.8em; 
		font-family: verdana; 
		color: #fff; 
		padding: 1em; 
		height: 100%; 
	} 
	a { 
		text-decoration: none; 
		color:#ff8000; 
	} 
	a:hover	{ 
		text-decoration: none; 
		background:#ff8000; 
		color:#ffffff; 
	} 
	a:visited { 
		text-decoration: none; 
		color:#ff8000; 
	} 
	a:visited:hover { 
		text-decoration: none; 
		background:#ff8000; 
		color:#ffffff; 
	} 
	.cds_scrollbar { 
		position: absolute; 
		background: #555 url(../images/bumps3.gif); 
		right: 0px; 
		cursor: pointer; 
	} 
	.cds_scrollbar_over { 
		background: #aaa url(../images/bump1.gif); 
	} 
	.cds_scrollbar_pushed { 
		background: #fff url(../images/bump0.gif); 
	} 
	.cds_track { 
		position: absolute; 
		background: #222 url(../images/bumps2.gif); 
		right: -1px; 
		top: 0px; 
		height: 100%; 
		cursor: pointer; 
	} 
	.cds_up { 
		position: absolute; 
		background: #f60 url(../images/bump5.gif); 
		right: 0px; 
		top: 0px; 
		cursor: pointer; 
	} 
	.cds_down { 
		position: absolute; 
		background: #f60 url(../images/bump5.gif); 
		right: 0px; 
		bottom: 0px; 
		cursor: pointer; 
	} 
</style> 
 
<script type="text/javascript"> 
// ==================================================== 
//    ---------- DHTML skinned ScrollBar ----------- 
// script: Gerard Ferrandez - Ge-1-doot - November 2007 
// http://www.dhteumeuleu.com/ 
// ==================================================== 
 
var cds = { 
	O  : [], 
	ok : false, 
	ym : 0, 
	N  : 0, 
	fo : 0, 
	sc : 0, 
	sp : 0, 
	to : 0, 
	/* on mouse move */ 
	m_move : function(e) { 
		if (!e) e = window.event; 
		/* vertical mouse position */ 
		cds.ym = e.screenY; 
		/* drag scrollbar */ 
		if (cds.fo.sg) cds.fo.scrollTop = cds.fo.sZ + (cds.ym - cds.fo.yZ) / cds.fo.r; 
	}, 
	/* on mouse up */ 
	m_up : function (e) { 
		if (!e) e = window.event; 
		var tg = (e.target) ? e.target : e.srcElement; 
		if (cds.fo && document.releaseCapture) cds.fo.releaseCapture(); 
		/* clear and skin scrollbar */ 
		if (cds.fo) cds.fo.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'cds_scrollbar cds_scrollbar_over' : 'cds_scrollbar'; 
		document.onselectstart = ''; 
		cds.clr(); 
		cds.fo.sg = false; 
	}, 
	/* clear */ 
	clr : function () { 
		clearTimeout(cds.to); 
		cds.sc = 0; 
		return false; 
	}, 
	/* refresh all scrollbars */ 
	refresh : function () { 
		for (var i = 0, N = cds.N; i < N; i++) { 
			var o = cds.O[i]; 
			o.v_scroll(); 
			o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.w + 'px'; 
			o.sb.style.height = Math.ceil(Math.max(o.w * .5, o.r * o.offsetHeight) + 1) + 'px'; 
		} 
	}, 
	/* arrows scrolling loop */ 
	a_scroll : function () { 
		if (cds.sc != 0) { 
			cds.fo.scrollTop += 6 * cds.sc / cds.fo.r; 
			cds.to = setTimeout(cds.a_scroll, cds.sp); 
			cds.sp = 32; 
		} 
	}, 
	/* start arrows scrolling */ 
	m_down : function (o, s) { 
		if (cds.sc == 0) { 
			o.dv.sb.className = 'cds_scrollbar cds_scrollbar_pushed'; 
			cds.fo = o.dv; 
			cds.sc = s; 
			cds.sp = 400; 
			cds.a_scroll(); 
		} 
	}, 
	/* init script */ 
	init : function () { 
		if (window.oper || (!window.addEventListener && !window.attachEvent)) { this.ok = false; return; } 
		/* add events */ 
		function addEvent (o, e, f) { 
			if (window.addEventListener) { o.addEventListener(e, f, false); cds.w3c = true; return true; } 
			if (window.attachEvent) return o.attachEvent('on' + e, f); 
			return false; 
		} 
		this.ok = addEvent(window.document, 'mousemove', cds.m_move); 
		this.ok = addEvent(window.document, 'mouseup', cds.m_up); 
		this.ok = addEvent(window, 'resize', cds.refresh); 
		return this.ok; 
	}, 
	/* add skinable scrollbar */ 
	add : function (id) { 
		/* get div */ 
		var dv = document.getElementById(id); 
		/* init script */ 
		if (!cds.ok) cds.init(); 
		/* return on error */ 
		if (!cds.ok || !dv) return false; 
		/* append div function */ 
		function cDiv (c) { 
			var o = document.createElement('div'); 
			o.dv = dv; 
			o.className = c; 
			dc.appendChild(o); 
			return o; 
		} 
		/* clone the original div to create an empty container */ 
		var dc = dv.cloneNode(false); 
		dc.style.overflow = "hidden"; 
		/* insert the container into the div's parent */ 
		dv.parentNode.appendChild(dc); 
		/* move the original div into the container */ 
		dc.appendChild(dv); 
		/* modify its positionning to fit into the container */ 
		dv.style.position = 'absolute'; 
		dv.style.left = dv.style.top = '0px'; 
		dv.style.width = dv.style.height = '100%'; 
		/* push div reference in array */ 
		cds.O[cds.N++] = dv; 
		dv.sg = false; 
		/* create and append skinned scrollbar HTML elements to the container, on top of the original div */ 
		dv.st = cDiv('cds_track'); 
		dv.sb = cDiv('cds_scrollbar'); 
		dv.su = cDiv('cds_up'); 
		dv.sd = cDiv('cds_down'); 
		/* scrollbar on mouse down */ 
		dv.sb.onmousedown = function (e) { 
			if (!this.dv.sg) { 
				if (!e) e = window.event; 
				/* save active/scrollable div */ 
				cds.fo = this.dv; 
				/* save vertical mouse and scroll position */ 
				this.dv.yZ = e.screenY; 
				this.dv.sZ = dv.scrollTop; 
				this.dv.sg = true; 
				/* pushed skin */ 
				this.className = 'cds_scrollbar cds_scrollbar_pushed'; 
				document.onselectstart = function () { return false; } 
				/* capture events OUTSIDE of the browser' window */ 
				if (cds.fo.setCapture) cds.fo.setCapture(); 
			} 
			return false; 
		} 
		/* track on mouse down */ 
		dv.st.onmousedown = function (e) { 
			if (!e) e = window.event; 
			/* save active/scrollable div */ 
			cds.fo = this.dv; 
			/* calculate scrollbar position */ 
			cds.ym = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
			for (var o = this.dv, y = 0; o != null; o = o.offsetParent) y += o.offsetTop; 
			this.dv.scrollTop = (cds.ym - y - (this.dv.r * this.dv.offsetHeight / 2) - this.dv.w) / this.dv.r; 
			this.dv.sb.onmousedown(e); 
		} 
		/* arrows on mouse down */ 
		dv.su.onmousedown = dv.su.ondblclick = function (e) { cds.m_down(this, -1); return false; } 
		dv.sd.onmousedown = dv.sd.ondblclick = function (e) { cds.m_down(this,  1); return false; } 
		/* release events */ 
		dv.su.onmouseout = dv.su.onmouseup = cds.clr; 
		dv.sd.onmouseout = dv.sd.onmouseup = cds.clr; 
		/* scrollbar on mouse over skin */ 
		dv.sb.onmouseover = function (e) { 
			if (!this.dv.sg) this.className = 'cds_scrollbar cds_scrollbar_over'; 
			return false; 
		} 
		/* scrollbar on mouse out (default) skin */ 
		dv.sb.onmouseout  = function (e) { 
			if (!this.dv.sg) this.className = 'cds_scrollbar'; 
			return false; 
		} 
		/* scrollbar repositionning */ 
		dv.v_scroll = function () { 
			this.r = (this.offsetHeight - 2 * this.w) / this.scrollHeight; 
			this.sb.style.top = Math.floor(this.w + this.scrollTop * this.r) + 'px'; 
		} 
		/* calculate scrollbar width */ 
		dv.w = dv.offsetWidth - dv.clientWidth + 1; 
		/* init scroll */ 
		dv.v_scroll(); 
		cds.refresh(); 
		/* hook on scroll browser's event */ 
		dv.onscroll = dv.v_scroll; 
		return dv; 
	} 
} 
 
onload = function() { 
	/* init scrollbars */ 
	cds.add('screen'); 
	cds.add('screen2'); 
} 
 
</script> 
</head> 
<body> 
 
<div id="screen"> 
<div class="content"> 
<h2>Skinned HTML Scrollbar</h2> 
<img src="../images/med6.jpg" style="position:relative;width:60%"> 
<p align="justify"> 
Lorem ipsum dolor sit amet, etiam parturient vel tincidunt porta, semper lectus etiam vestibulum, rutrum dictum varius tempor, nam id elit wisi, praesent neque nulla nostra aliquam sed. Diam nec adipiscing potenti in sit. Ut ac. Diam ac, ornare phasellus, nullam dapibus duis pede feugiat nunc volutpat, tellus cras dignissim, leo hac. Cursus mollis elementum etiam massa integer, rutrum at. Quis a ligula, condimentum ac ac, amet lorem erat ac praesent ut, auctor justo amet nulla at donec justo. Nunc ac eu a, eros massa nonummy, nec aenean erat platea, placerat est, tristique ridiculus eleifend odio massa. Suspendisse nulla elit, eu sit est amet ante, eros amet ut fames nibh tincidunt aliquet, nunc tristique tellus, erat ultrices eros nonummy adipisicing vel. Dolor egestas euismod libero. Erat vitae elit vero neque, donec magna, mauris erat neque, magnis amet sed ligula in non. Rhoncus blandit, mi elementum cursus elementum turpis. Vel massa, magna nulla facilisis egestas elit placerat.</p> 
 
<p align="justify"> 
Sed turpis praesent animi, vestibulum libero sed, suscipit diam nulla. Nunc at sed habitant, consequat sociis morbi, vivamus massa, metus eu wisi convallis ut varius varius. Lacinia id eu. Elit lorem wisi tellus, blandit turpis a rhoncus libero, consequat quis sit. Vestibulum arcu consectetuer leo. Id id, duis odio quis dolor vestibulum scelerisque in, cras suscipit consequat et eget rhoncus integer. Cursus eu vulputate in, nunc volutpat in feugiat et, ut fusce est in vestibulum turpis, donec nec, leo torquent arcu morbi. Eleifend et, molestie vehicula dui scelerisque nec, tempor ipsum amet etiam eget, in varius ac dui morbi eros. Vitae pellentesque mauris rhoncus duis vivamus nulla, excepturi tincidunt integer tincidunt cum ac fusce, ornare cras urna maecenas. Aliquam tellus habitant diam suspendisse, leo dolore ultrices luctus lacus elit velit, enim consequat praesent luctus nibh elementum cras, luctus morbi nunc id dictum, imperdiet leo cras. Adipiscing at, gravida quisquam vivamus ut sociosqu, nulla imperdiet habitant ac sollicitudin vulputate, lobortis vehicula praesent, fames ad enim fermentum suscipit mauris dignissim.</p> 
<p align="justify"> 
Nulla at. Mi sit libero, sed sit a. Natoque nam sem mauris justo erat, bibendum tincidunt urna at, nec vel vitae in, metus dictum. Libero curabitur condimentum a vestibulum a, iaculis nulla imperdiet, eu amet, id dui. Ipsum metus gravida tristique urna. Risus et scelerisque, mi sit vivamus sodales volutpat vehicula eu, nunc et, porttitor nonummy vel lacus. Urna nec sit, vitae et ante id tortor pharetra.</p> 
<p align="justify"> 
Morbi lobortis nascetur consectetuer, eget tempor, id sed donec natoque feugiat, mauris a mauris at faucibus. Euismod fringilla velit ultricies sed nulla, lacus libero non ornare vitae proin. Proin nullam gravida sem id eleifend, consectetuer velit integer at elit lacus dictum. Nulla dui fermentum, fugiat etiam sit curabitur, libero feugiat et orci dis amet, mauris justo elit mauris mattis, eget ac aperiam viverra vivamus metus. Nascetur quis natoque purus duis sit. Vel sociis asperiores adipiscing eleifend, eu mauris, ut vitae ullamcorper pede sit, pretium gravida mauris duis quam vel. Ut nulla sit, elementum fringilla phasellus elit varius wisi, eu facilisis adipiscing a mollis, turpis praesent risus et, luctus sollicitudin aptent consequat. Pellentesque elit egestas maecenas ea, tortor lacus, sed erat. Vestibulum lobortis, aliquam feugiat in quis, sapien non nam magnis morbi vestibulum augue, sapien curabitur nulla pede nec vehicula lacus, netus vivamus. Fusce tincidunt quis ut, non dui fringilla aliquam, lorem sed lorem ipsum nam. Netus eu nec, accumsan fusce, parturient nonummy a luctus, neque dictum sodales diam habitasse, aliquam morbi lorem tincidunt facilisis et etiam. Donec at curabitur vitae, sit blandit malesuada, et non non egestas eget enim.</p> 
<p align="justify"> 
In tristique pharetra a, pretium amet, et rutrum habitasse commodo non tortor. Dui dictum lorem mauris, ut cursus feugiat, in neque nec. In ac sapien nec ornare, nec vehicula habitant sollicitudin ornare pharetra at, enim parturient convallis mauris interdum, pellentesque ultricies venenatis adipiscing faucibus, quam ligula. Sint mattis. Dignissim lacus sit, vestibulum eget id, adipiscing tincidunt potenti inceptos quis non, iaculis tortor, netus taciti eu commodo aliquam. Massa eu ut sed lectus. Mauris tortor vitae, pellentesque lectus integer, dolor libero, egestas lorem turpis quisque. Et natoque mauris sed leo quis. Sapien integer morbi non commodo metus. Rutrum nostra non morbi nulla aliquam massa, id lorem eros, sodales mi.</p> 
</div> 
</div> 
 
<div id="screen2"> 
<div class="content"> 
<p align="justify"> 
Lorem ipsum dolor sit amet, etiam parturient vel tincidunt porta, semper lectus etiam vestibulum, rutrum dictum varius tempor, nam id elit wisi, praesent neque nulla nostra aliquam sed. Diam nec adipiscing potenti in sit. Ut ac. Diam ac, ornare phasellus, nullam dapibus duis pede feugiat nunc volutpat, tellus cras dignissim, leo hac. Cursus mollis elementum etiam massa integer, rutrum at. Quis a ligula, condimentum ac ac, amet lorem erat ac praesent ut, auctor justo amet nulla at donec justo. Nunc ac eu a, eros massa nonummy, nec aenean erat platea, placerat est, tristique ridiculus eleifend odio massa. Suspendisse nulla elit, eu sit est amet ante, eros amet ut fames nibh tincidunt aliquet, nunc tristique tellus, erat ultrices eros nonummy adipisicing vel. Dolor egestas euismod libero. Erat vitae elit vero neque, donec magna, mauris erat neque, magnis amet sed ligula in non. Rhoncus blandit, mi elementum cursus elementum turpis. Vel massa, magna nulla facilisis egestas elit placerat.</p> 
<p align="justify"> 
Sed turpis praesent animi, vestibulum libero sed, suscipit diam nulla. Nunc at sed habitant, consequat sociis morbi, vivamus massa, metus eu wisi convallis ut varius varius. Lacinia id eu. Elit lorem wisi tellus, blandit turpis a rhoncus libero, consequat quis sit. Vestibulum arcu consectetuer leo. Id id, duis odio quis dolor vestibulum scelerisque in, cras suscipit consequat et eget rhoncus integer. Cursus eu vulputate in, nunc volutpat in feugiat et, ut fusce est in vestibulum turpis, donec nec, leo torquent arcu morbi. Eleifend et, molestie vehicula dui scelerisque nec, tempor ipsum amet etiam eget, in varius ac dui morbi eros. Vitae pellentesque mauris rhoncus duis vivamus nulla, excepturi tincidunt integer tincidunt cum ac fusce, ornare cras urna maecenas. Aliquam tellus habitant diam suspendisse, leo dolore ultrices luctus lacus elit velit, enim consequat praesent luctus nibh elementum cras, luctus morbi nunc id dictum, imperdiet leo cras. Adipiscing at, gravida quisquam vivamus ut sociosqu, nulla imperdiet habitant ac sollicitudin vulputate, lobortis vehicula praesent, fames ad enim fermentum suscipit mauris dignissim.</p> 
<p align="justify"> 
Nulla at. Mi sit libero, sed sit a. Natoque nam sem mauris justo erat, bibendum tincidunt urna at, nec vel vitae in, metus dictum. Libero curabitur condimentum a vestibulum a, iaculis nulla imperdiet, eu amet, id dui. Ipsum metus gravida tristique urna. Risus et scelerisque, mi sit vivamus sodales volutpat vehicula eu, nunc et, porttitor nonummy vel lacus. Urna nec sit, vitae et ante id tortor pharetra.</p> 
<p align="justify"> 
Morbi lobortis nascetur consectetuer, eget tempor, id sed donec natoque feugiat, mauris a mauris at faucibus. Euismod fringilla velit ultricies sed nulla, lacus libero non ornare vitae proin. Proin nullam gravida sem id eleifend, consectetuer velit integer at elit lacus dictum. Nulla dui fermentum, fugiat etiam sit curabitur, libero feugiat et orci dis amet, mauris justo elit mauris mattis, eget ac aperiam viverra vivamus metus. Nascetur quis natoque purus duis sit. Vel sociis asperiores adipiscing eleifend, eu mauris, ut vitae ullamcorper pede sit, pretium gravida mauris duis quam vel. Ut nulla sit, elementum fringilla phasellus elit varius wisi, eu facilisis adipiscing a mollis, turpis praesent risus et, luctus sollicitudin aptent consequat. Pellentesque elit egestas maecenas ea, tortor lacus, sed erat. Vestibulum lobortis, aliquam feugiat in quis, sapien non nam magnis morbi vestibulum augue, sapien curabitur nulla pede nec vehicula lacus, netus vivamus. Fusce tincidunt quis ut, non dui fringilla aliquam, lorem sed lorem ipsum nam. Netus eu nec, accumsan fusce, parturient nonummy a luctus, neque dictum sodales diam habitasse, aliquam morbi lorem tincidunt facilisis et etiam. Donec at curabitur vitae, sit blandit malesuada, et non non egestas eget enim.</p> 
<p align="justify"> 
In tristique pharetra a, pretium amet, et rutrum habitasse commodo non tortor. Dui dictum lorem mauris, ut cursus feugiat, in neque nec. In ac sapien nec ornare, nec vehicula habitant sollicitudin ornare pharetra at, enim parturient convallis mauris interdum, pellentesque ultricies venenatis adipiscing faucibus, quam ligula. Sint mattis. Dignissim lacus sit, vestibulum eget id, adipiscing tincidunt potenti inceptos quis non, iaculis tortor, netus taciti eu commodo aliquam. Massa eu ut sed lectus. Mauris tortor vitae, pellentesque lectus integer, dolor libero, egestas lorem turpis quisque. Et natoque mauris sed leo quis. Sapien integer morbi non commodo metus. Rutrum nostra non morbi nulla aliquam massa, id lorem eros, sodales mi.</p> 
<p align="justify"> 
Enim quam, diam enim faucibus in dictum donec tincidunt. Elementum ipsum nunc arcu non phasellus at, sed mi duis nostra conubia nam, hac voluptatem massa porttitor, posuere gravida at, sodales eget mauris mauris eget pellentesque. Lorem pede arcu vivamus suspendisse, lectus neque. Mollis et enim convallis velit eros lobortis, leo lorem risus aliquam non sodales, sed interdum in. In nullam cum purus tristique in, fusce eros ut vestibulum donec, phasellus urna porttitor primis eu, aliquet odit vestibulum quam aenean maecenas, et proin ultricies feugiat nec sed in.</p> 
<p align="justify"> 
</p> 
</div> 
</div> 
</body> 
</html>
Skinned HTML Scrollbar

Direct Link

Source code

Recent Comments

Feed updates subscription

Donate

License
