Problème scrollbar tinyscroll

Bonjour à tous !!!
Comme dit dans le titre j'ai un problème avec les scrollbar tinybar, mais en faite ca le fait avec toutes les scroll (sauf celle par défaut toute moche).

Alors voilà le problème, j'ai un contenu avec plusieurs titre et des contenu cacher en dessous des titre. Quand je cliquer sur un des titre ca ouvre son contenu, jusqu'ici pas de problème.

Tous mes titre titre sont dans une balise à taille fixe où il y a ma scroll bar. Le problème c'est que ma scrollbar garde la taille comme si tous les contenu était ouvert. Ca veut dire que quand ils sont fermés ben on peu quand même scroller et on ne voit plus rien.

Voici mon code :

<section id="lock">
			<aside id="lock-projects">
				<div id="scrollbar2">
					<div class="scrollbar"><div class="thumb"><div class="end"></div></div></div>
						<div class="viewport">
							<div class="overview" id="projets">
								<script type="text/javascript">
								var
								projects = document.getElementById('projets'),
								resultats = "",
								i,
								n;


									for (i = 1; i < 4; i++){
										resultats += '<div class="projects"><h2>Project '+i+'</h2> <div class="runs">';
										for (n=1; n<5; n++){
											resultats += '<aside><div class="replay"><a href="#"></a></div><h3>Run '+n+' - Title</h3><span class="scenario">Scénario #</span><span class="statut">Statut</span></aside>';
										}
										resultats += '</div></div>';

									}

								projets.innerHTML = resultats;

$('.runs').hide();
			$('.projects h2').click(function(){
				$(this).next(".runs").slideToggle('slow');
				$(this).toggleClass('open');
			});

								</script>
							</div>
						</div>
				</div>
			</aside>
		</section>

voici mon css

#scrollbar2 { 
		width: 100%;
	}

	#scrollbar2 .viewport { 
		width:100%; 
		height: 320px; 
		width:100%; 
		overflow: hidden; 
		position: relative; 
	}

	#scrollbar2 .overview { 
		list-style: none; position: absolute; 
		left: 0; 
		top: 0; 
		padding: 0; 
		margin: 0;
	}

	#scrollbar2 .scrollbar{ 
		background: transparent url(../img/supervisor/1920/fond-scroll.png) repeat-y center; 
		position: relative; 
		background-position: center; 
		float: right; 
		width: 15px; 
	}
	
	#scrollbar2 .thumb { 
		background: transparent url(../img/supervisor/1920/scroll.png) no-repeat 50% 100%; 
		height: 20px; 
		width: 25px; 
		cursor: pointer; 
		overflow: 
		hidden; 
		position: absolute; 
		top: 0; 
		left: -5px; 
	}
	
	#scrollbar2 .thumb .end { 
		background: transparent url(../img/supervisor/1920/scroll.png) no-repeat 50% 0; 
		overflow: hidden; 
		height: 5px; 
		width: 25px; 
	}
	
	#scrollbar2 .disable { 
		display: none; 
	}
	
	.noSelect { 
		user-select: none; 
		-o-user-select: none; 
		-moz-user-select: none; 
		-khtml-user-select: none; 
		-webkit-user-select: none; 
	}

Et voilà le lien du js

http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.min.js

Merci d'avance pour votre aide