Download Scrollable div

Remember a strict doctype

A strict doctype is your biggest ensurance for this script to look and work the same across different browsers

Put this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
at the top of your HTML file

Put this into your <HEAD> section

	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	p{
		margin-top:0px;
	}
	#dhtmlgoodies_scrolldiv{
		/* The total width of the scrolling div including scrollbar */
		width:530px;
		height:500px;	/* The height of the scrolling div */
	}
	#scrolldiv_parentContainer{
		width:500px;	/* Width of the scrolling text */
		height:100%;
		overflow:hidden;
		border:1px solid #BC8FBD;
		float:left;
		position:relative;
	}
	
	/*
	CSS for the scrolling content 
	*/
	#scrolldiv_content{
		padding: 5px;
		position:relative;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size: 0.9em;
		line-height:130%;
		color: #333;
	}
	
	/*
	The scrollbar slider 
	*/
	#scrolldiv_slider{
		width:15px;
		margin-left:2px;
		height:500px;
		float:left;
	}
	
	/*
	The scrollbar (The bar between the up and down arrow )
	*/
	#scrolldiv_scrollbar{
		width:15px;
		height:460px;	/* Total height - 40 pixels */
		border:1px solid #BC8FBD;
		position:relative;
		
	}
	/*
	The scrollbar handle
	*/
	#scrolldiv_theScroll{
		margin:1px;
		width:13px;
		height:13px;
		background-color:#BC8FBD;
		position:absolute;	
		top:0px;
		left:0px;
		cursor:pointer;
	}
	/*
	Scroll buttons(The up and down arrows)
	*/
	#scrolldiv_scrollUp,#scrolldiv_scrollDown{
		width:15px;
		height:16px;
		border:1px solid #BC8FBD;
		color: #BC8FBD;
		text-align:center;
		font-size:16px;
		line-height:16px;
		cursor:pointer;
	}
	#scrolldiv_scrollUp{
		margin-bottom:2px;
	}
	#scrolldiv_scrollDown{
		margin-top:2px;
	}
	#scrolldiv_scrollDown span,#scrolldiv_scrollUp span{
		font-family: Symbol;
	}

	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, September 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/	
	var contentHeight = 0; 	// The total height of the content
	var visibleContentHeight = 0;	
	var scrollActive = false;
	
	var scrollHandleObj = false; // reference to the scroll handle
	var scrollHandleHeight = false;
	var scrollbarTop = false;
	var eventYPos = false;

	var scrollbuttonActive = false;
	var scrollbuttonDirection = false;
	var scrollbuttonSpeed = 2; // How fast the content scrolls when you click the scroll buttons(Up and down arrows)
	var scrollTimer = 10;	// Also how fast the content scrolls. By decreasing this value, the content will move faster	
	
	var scrollMoveToActive = false;
	var scrollMoveToYPosition = false;
	function scrollDiv_startScroll(e)
	{
		if(document.all)e = event;
		scrollbarTop = document.getElementById('scrolldiv_theScroll').offsetTop;
		eventYPos = e.clientY;
		scrollActive = true;
	}
	
	function scrollDiv_stopScroll()
	{
		scrollActive = false;
		scrollbuttonActive = false;
		scrollMoveToActive = false;
	}
	function scrollDiv_scroll(e)
	{
		if(!scrollActive)return;
		if(document.all)e = event;
		if(e.button!=1 && document.all)return;
		var topPos = scrollbarTop + e.clientY - eventYPos; 
		if(topPos<0)topPos=0;
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1)topPos = visibleContentHeight-(scrollHandleHeight+4);
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 
	}
	
	/*
	Click on the slider
	Move the content to the this point
	*/
	function scrolldiv_scrollMoveToInit(e)
	{		
		if(document.all)e = event;
		scrollMoveToActive = true;
		scrollMoveToYPosition = e.clientY - document.getElementById('scrolldiv_scrollbar').offsetTop;
		if(document.getElementById('scrolldiv_theScroll').offsetTop/1 > scrollMoveToYPosition) scrollbuttonDirection = scrollbuttonSpeed*-2; else  scrollbuttonDirection = scrollbuttonSpeed*2;
		scrolldiv_scrollMoveTo();	
	}
	
	function scrolldiv_scrollMoveTo()
	{
		if(!scrollMoveToActive || scrollActive)return;
		var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');
		topPos = topPos/1 + scrollbuttonDirection;
		if(topPos<0){
			topPos=0;
			scrollMoveToActive=false;
		}
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){
			topPos = visibleContentHeight-(scrollHandleHeight+4);	
			scrollMoveToActive=false;
		}
		if(scrollbuttonDirection<0 && topPos<scrollMoveToYPosition-scrollHandleHeight/2)return;	
		if(scrollbuttonDirection>0 && topPos>scrollMoveToYPosition-scrollHandleHeight/2)return;			
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 		
		setTimeout('scrolldiv_scrollMoveTo()',scrollTimer);		
	}
	
	function cancelEvent()
	{
		return false;			
	}

	function scrolldiv_scrollButton()
	{
		if(this.id=='scrolldiv_scrollDown')scrollbuttonDirection = scrollbuttonSpeed; else scrollbuttonDirection = scrollbuttonSpeed*-1;
		scrollbuttonActive=true;
		scrolldiv_scrollButtonScroll();
	}
	function scrolldiv_scrollButtonScroll()
	{
		if(!scrollbuttonActive)return;
		var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');
		topPos = topPos/1 + scrollbuttonDirection;
		if(topPos<0){
			topPos=0;
			scrollbuttonActive=false;
		}
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){
			topPos = visibleContentHeight-(scrollHandleHeight+4);	
			scrollbuttonActive=false;
		}	
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 			
		setTimeout('scrolldiv_scrollButtonScroll()',scrollTimer);
	}
	function scrolldiv_scrollButtonStop()
	{
		scrollbuttonActive = false;
	}
	
	
	function scrolldiv_initScroll()
	{
		visibleContentHeight = document.getElementById('scrolldiv_scrollbar').offsetHeight ;
		contentHeight = document.getElementById('scrolldiv_content').offsetHeight - visibleContentHeight;		
		scrollHandleObj = document.getElementById('scrolldiv_theScroll');
		scrollHandleHeight = scrollHandleObj.offsetHeight;
		scrollbarTop = document.getElementById('scrolldiv_scrollbar').offsetTop;		
		document.getElementById('scrolldiv_theScroll').onmousedown = scrollDiv_startScroll;
		document.body.onmousemove = scrollDiv_scroll;
		document.getElementById('scrolldiv_scrollbar').onselectstart = cancelEvent;
		document.getElementById('scrolldiv_theScroll').onmouseup = scrollDiv_stopScroll;
		if(document.all)document.body.onmouseup = scrollDiv_stopScroll; else document.documentElement.onmouseup = scrollDiv_stopScroll;
		document.getElementById('scrolldiv_scrollDown').onmousedown = scrolldiv_scrollButton;
		document.getElementById('scrolldiv_scrollUp').onmousedown = scrolldiv_scrollButton;
		document.getElementById('scrolldiv_scrollDown').onmouseup = scrolldiv_scrollButtonStop;
		document.getElementById('scrolldiv_scrollUp').onmouseup = scrolldiv_scrollButtonStop;
		document.getElementById('scrolldiv_scrollUp').onselectstart = cancelEvent;
		document.getElementById('scrolldiv_scrollDown').onselectstart = cancelEvent;
		document.getElementById('scrolldiv_scrollbar').onmousedown = scrolldiv_scrollMoveToInit;
	}
	/*
	Change from the default color
	*/	
	function scrolldiv_setColor(rgbColor)
	{
		document.getElementById('scrolldiv_scrollbar').style.borderColor = rgbColor;
		document.getElementById('scrolldiv_theScroll').style.backgroundColor = rgbColor;
		document.getElementById('scrolldiv_scrollUp').style.borderColor = rgbColor;
		document.getElementById('scrolldiv_scrollDown').style.borderColor = rgbColor;
		document.getElementById('scrolldiv_scrollUp').style.color = rgbColor;
		document.getElementById('scrolldiv_scrollDown').style.color = rgbColor;
		document.getElementById('scrolldiv_parentContainer').style.borderColor = rgbColor;
	}
	/*
	Setting total width of scrolling div
	*/
	function scrolldiv_setWidth(newWidth)
	{
		document.getElementById('dhtmlgoodies_scrolldiv').style.width = newWidth + 'px';
		document.getElementById('scrolldiv_parentContainer').style.width = newWidth-30 + 'px';		
	}
	
	/*
	Setting total height of scrolling div
	*/
	function scrolldiv_setHeight(newHeight)
	{
		document.getElementById('dhtmlgoodies_scrolldiv').style.height = newHeight + 'px';
		document.getElementById('scrolldiv_parentContainer').style.height = newHeight + 'px';
		document.getElementById('scrolldiv_slider').style.height = newHeight + 'px';
		document.getElementById('scrolldiv_scrollbar').style.height = newHeight-40 + 'px';		
	}
	/*
	Setting new background color to the slider 
	*/
	function setSliderBgColor(rgbColor)
	{
		document.getElementById('scrolldiv_scrollbar').style.backgroundColor = rgbColor;
		document.getElementById('scrolldiv_scrollUp').style.backgroundColor = rgbColor;
		document.getElementById('scrolldiv_scrollDown').style.backgroundColor = rgbColor;
	}
	/*
	Setting new content background color
	*/
	function setContentBgColor(rgbColor)
	{
		document.getElementById('scrolldiv_parentContainer').style.backgroundColor = rgbColor;
	}
	
	/*
	Setting scroll button speed
	*/
	function setScrollButtonSpeed(newScrollButtonSpeed)
	{
		scrollbuttonSpeed = newScrollButtonSpeed;
	}
	/*
	Setting interval of the scroll
	*/
	function setScrollTimer(newInterval)
	{
		scrollTimer = newInterval;
	}
	
	</script>

Put this into your <BODY> section

<div id="dhtmlgoodies_scrolldiv">
	<div id="scrolldiv_parentContainer">
		<div id="scrolldiv_content">
		<!-- PUT YOUR HTML CONTENT IN HERE -->
		Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>Scrolling content<br>
		<!-- END OF HTML CONTENT -->
		</div>
	</div>
	<div id="scrolldiv_slider">
		<div id="scrolldiv_scrollUp"><img src="images/arrow_up.gif"></div>
		<div id="scrolldiv_scrollbar">
			<div id="scrolldiv_theScroll"><span></span></div>
		</div>
		<div id="scrolldiv_scrollDown"><img src="images/arrow_down.gif"></div>
	</div>
</div>
<script type="text/javascript">
scrolldiv_setColor('#317082');	// Setting border color of the scrolling content
setSliderBgColor('#E2EBED');	// Setting color of the slider div
setContentBgColor('#FFFFFF');	// Setting color of the scrolling content
setScrollButtonSpeed(1);	// Setting speed of scrolling when someone clicks on the arrow or the slider
setScrollTimer(5);	// speed of 1 and timer of 5 is the same as speed of 2 and timer on 10 - what's the difference? 1 and 5 will make the scroll move a little smoother.
scrolldiv_setWidth(450);	// Setting total width of scrolling div
scrolldiv_setHeight(400);	// Setting total height of scrolling div
scrolldiv_initScroll();	// Initialize javascript functions
</script>

Copy these two images into a folder called "images"

Right click on the arrows and choose "Save target As". If you want to, you could replace these two images with your own version

Implementation

Content

Put the content you want to scroll right below the line  in the code

Javascript configuration

Use these javascript methods to configure the script:

scrolldiv_setColor(rgbColor) - Specify a new border color
setSliderBgColor(rgbColor) - Specify a background color for the scrollbar
setContentBgColor(rgbColor) - Specify a background color for the scrolling content
setScrollButtonSpeed(newSpeed) - Increase the scrolling speed(Default = 1)
setScrollTimer(newInterval) - Lower value = faster scrolling(Default = 10)
scrolldiv_setWidth(newWidth) - Specify a new width
scrolldiv_setHeight(newHeight) - Specify a new height
scrolldiv_initScroll() - Initializing the scrolling div. The functions above are optional, this one is needed for the script to work

For further information, see how these functions are used in the code.

Comments

Hi! My name is Carlos, I am brazilian! First of all, Scrollable div is very wonderful to my project. But I can't make interface with asiatic, russian, arabic caractere, please help me about it>Thank you very much!

Carlos Alberto Bessa at 08:07PM, 2011/04/01.

hey ...
the head code for this should be shortened...
the javascript can be packagd int an external file, of .js format
and the css part can be saved in a .css file with a stylesheet reference in the head section.

arjunK at 09:22AM, 2011/06/01.

I am trying to run three instances of this script on one page, the first one works perfectly but the other two are dead, they appear properly but they dont scroll at all ...Has anyone got an idea what the problem may be?

Gregg at 04:48AM, 2011/06/05.

I want to add a scroll handle, but I'm having trouble. Not so javascript saavy, but figure it must have something to do with changing the var var scrollHandleObj = from false to true? Or should it be another value? I'm also not sure how to make the handle indicate how much content there is to scroll through, as a regular scroll bar does on the edge of the browser window.

Cyd at 02:04AM, 2012/01/31.

Wonderful tool, I also like to, PLz let us how can we add multile scrollble div in ONE page ???

Udara at 08:22AM, 2012/09/05.

I am not too JS savvy, so sorry if this is a stupid question -Is there a way to make this scroll only on click to a specific distance in pixels? Using it to scroll vertically in this instance.Thanks in advance!!

Latte at 07:37PM, 2013/06/05.

XRumer 12.0.19 is the BEST

Melanieacecy at 11:04AM, 2016/10/23.

Hello,I have implement this plugin successfully for crome and mozilla firefox but this not working on internet explorer,Please suggest me, How i solve this?

RAHUL KHAN at 10:25AM, 2017/01/02.