ho trovato questa guida per inserire questa scrollbar personalizzata: http://livepipe.net/control/scrollbar

allora ho fatto un documento di prova cosi:
codice:
<html>
<head>
<script>			
	var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
	
	$('scroll_down_50').observe('click',function(event){
		scrollbar.scrollBy(-50);
		event.stop();
	});
	
	$('scroll_up_50').observe('click',function(event){
		scrollbar.scrollBy(50);
		event.stop();
	});
	
	$('scroll_top').observe('click',function(event){
		scrollbar.scrollTo('top');
		event.stop();
	});
	
	$('scroll_bottom').observe('click',function(event){
		//to animate a scroll operation you can pass true
		//or a callback that will be called when scrolling is complete
		scrollbar.scrollTo('bottom',function(){
			if(typeof(console) != "undefined")
				console.log('Finished scrolling to bottom.');
		});
		event.stop();
	});
	
	$('scroll_second').observe('click',function(event){
		//you can pass a number or element to scroll to
		//if you pass an element, it will be centered, unless it is
		//near the bottom of the container
		scrollbar.scrollTo($('second_subhead'));
		event.stop();
	});
	
	$('scroll_third').observe('click',function(event){
		//passing true will animate the scroll
		scrollbar.scrollTo($('third_subhead'),true);
		event.stop();
	});
	
	$('scroll_insert').observe('click',function(event){
		$('scrollbar_content').insert('&lt;p>Inserted: ' + $('repeat').innerHTML + '&lt;/p&gt;');
		//you only need to call this if ajax or dom operations modify the layout
		//this is automatically called when the window resizes
		scrollbar.recalculateLayout();
		event.stop();
	});
</script>
<style>
#scrollbar_container {  
    position:relative;  
    width:500px;  
} 
 
#scrollbar_track {  
    position:absolute;  
    top:0;  
    rightright:0;  
    height:100%;  
    width:10px;  
    background-color:transparent;  
    cursor:move;  
} 
 
#scrollbar_handle {  
    width:10px;  
    background-color:#5c92e7;  
    cursor:move;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    opacity:0.9;  
    -moz-opacity:0.9;  
} 
 
#scrollbar_content {  
    overflow:hidden;  
    width:485px;  
    height:250px;  
}  
</style>

</head>

<body>

<div id="scrollbar_container">  
    <div id="scrollbar_track"><div id="scrollbar_handle"></div></div>  
    <div id="scrollbar_content">prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
</div>  
</div>  
</body>
</html>
purtroppo il risultato è un documento con scritto
prova
prova
prova
fino a che non spariscono le scritte senza scrollbar... c'è qualcuno che mi può aiutare a capire cosa ho sbagliato???
grazie