I currently have a div that contains text, ofc; however, I am trying to make the scroll load on its own. (Yes i know DHTML has one of these but i like making things on my own). When i hover over the div that contains text too long for the div the scrollbar does appear; however, if i hover over the scrollbar it fades in and out. I dont understand why because the scrollbar is inside the .scroll area. Kinda confusing so i will show you my code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unique Scroll</title>

<style>
* { margin: 0 auto; padding: 0;}

body, html { height:100%;}

.scroll { border:1px solid black; overflow:hidden; height:250px; width:300px;}
.outerScroll { border-left:1px solid black; width:15px; float:right; display:none; top:0; position:relative;}
.innerScroll { border:1px solid red; background-color:red; width:11px; margin-left:1px; position:relative;}
</style>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
	var scrollCount = $('.scroll').length;
	for(i=0; i<scrollCount; i++){
		
		var scrollContent = $('.scroll').eq(i).html()
		$('.scroll').eq(i).html('<div>'+scrollContent+'</div>')
		
		var scrollHeight = $('.scroll').eq(i).height()
		var subScrollHeight = $('.scroll>div').eq(i).height()
		
		if( scrollHeight < subScrollHeight ){
			$('.scroll').eq(i).html('<div class="outerScroll" style="height:'+scrollHeight+'px;"><div class="innerScroll" style="height:'+parseInt(scrollHeight-(subScrollHeight-scrollHeight))+'px;"></div></div>'+scrollContent)
		}
	}
})

$(document).on('mouseover','.scroll',function(){
	$(this).children('.outerScroll').fadeIn(300)
	$(this).children('.outerScroll').css('margin-top',$(this).scrollTop())
	$(this).children('.outerScroll').children('.innerScroll').css('margin-top',$(this).scrollTop())
	var scrollAmount = $(this).scrollTop()
	dev(scrollAmount)
})

$(document).on('mouseout','.scroll',function(){
	$(this).children('.outerScroll').fadeOut(300)
})

function dev(s){
	$('#dev').html(s)
}
</script>

</head>
<body>

<div class="scroll">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
</div>


<div id="dev"></div>

</body>
</html>
Also, I have tried .stop() and .stop(true,true). I would rather it not disappear aka fadeIn nor out at all until it leaves .scroll. Any ideas?