Ciao,

ho un problema che proprio non riesco a risolvere.
Ho provato di tutto con esito negativo.
Non sono esperto di JS quindi chiedo aiuto a chi mastica bene questo linguaggio.

Ho una pagina con dei link. Ogni link apre un div con la pseudo-classe CSS "target".
Ogni qualvolta si clicca su un link si apre un div che si va a sovrappore all'altro.
E qui sorge il problema.
Ho aggiunto una scrollbar con JQuery prelevata dal web, che funziona perfettamente per il primo "div".
Se clicco sul secondo link, si apre il div rispettivo e si va a sovrappore al primo.
La barra dello scroll viene visualizzata, ma non si muove.
Anzi, se provo a scrollare e torno al primo div cliccando sul primo link, succede che è quello scroll ad essersi mosso.
Qui di seguito i codici HTML, Javascript e CSS.
Spero in un vostro aiuto.
Grazie.


HTML
codice:
<link href="js/scrollbar/scrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/scrollbar/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="js/scrollbar/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))<script>	
<script src="js/scrollbar/jquery.mousewheel.min.js"></script>	
<script src="js/scrollbar/jquery.mCustomScrollbar.js"></script>
<script>
   (function($){
   $(window).load(function(){
   $(".scroll,.scroll_2").mCustomScrollbar({
   scrollButtons:{
   enable:true
    }
    });			
    });
    })(jQuery);
</script>

<div class="box">
BIOGRAFIA
</div>
<div id="testo">
<div id="title">BIOGRAFIA</div>
<div class="scroll">
qui il testo del primo DIV
</div>
</div>

<div class="box">
ESPOSIZIONI
</div><div id="testo_2">
<div id="title">ESPOSIZIONI</div>
<div class="scroll_2">
qui il testo del secondo DIV
</div>
</div>
CSS
codice:
.box{
       position:relative;
       width:2%;
       height:60px;
       margin-bottom:10px;
       padding:0;	  
       background-color: rgba(100, 100, 100, .4);
       border-radius:0 10px 10px 0;
       -moz-border-radius:0 10px 10px 0;
       -webkit-border-radius:0 10px 10px 0;
       box-shadow:2px 2px 4px 2px #111;
       transition-property:background-color, width;
       transition-duration:1s;
       -webkit-transition-property:background-color, width;
       -webkit-transition-duration:1s;
       -o-transition-property:background-color, width;
       -o-transition-duration:1s;
       -moz-transition-property:background-color, width;
       -moz-transition-duration:1s;
}
	 
	 
.box:hover {	 
            background-color: rgba(50, 50, 50, .7);
	 width:4%;
	      }

		   
.box a {
      position:absolute;
      margin-top:0px;
      margin-left:40px;
      padding-left:20px;
      color: rgba(255, 255, 255, .6);
      text-decoration:none;
      font: 22px Bellerose,Verdana, Arial, sans-serif;	  
      letter-spacing:5px;
      transition-property:color;
      transition-duration:2s;
     -webkit-transition-property:color;
     -webkit-transition-duration:2s;
     -o-transition-property:color;
     -o-transition-duration:2s;
     -moz-transition-property:color;
     -moz-transition-duration:2s;	   
}
   
.box:hover a{	 
           display:block;
	margin-left:40px;
	padding-left:20px;
	color: rgba(255, 255, 255, 1);
}

#testo, #testo_2 {
            position:absolute; 
	 font: 15px century gothic;
	 z-index:100;
	 top:2%; 
	 left:28%;
	 width:400px;
	 height:500px;		
	 padding:30px;
	 border-radius:5px;
	 box-shadow:2px 2px 5px #000;
	 opacity:0;
	 background: rgba(0, 0, 0, .8);
	 transition-property:opacity;
	 transition-duration:2s;
	 -o-transition-property:opacity;
	 -o-transition-duration:2s;
	 -webkit-transition-property:opacity;
	 -webkit-transition-duration:2s;
	 -moz-transition-property:opacity;
	 -moz-transition-duration:2s;
}

#testo:target, 
#testo_2:target {
                       opacity:1;
                       }