[jQuery] mousewheel

Ciao a tutti, sto implementanto in un mio progetto una scrollbars in jqeury vi posto il code:

<style>
div.article { float:left; height:90%; overflow:hidden; width:430px; }
div#slider-vertical { float:right; background-color:#CCC; width:5px; height:90%; width:10px; }
</style>
...
<script>
$(function(){
		var defaultHeight;

		$("#slider-vertical").slider({//inizializzo lo slider
				orientation: "vertical",
				range: "min",
				min: 0,
				max: 100,
				value: 100,
				slide: function(event, ui) {
					defaultHeight=document.getElementById("article").offsetHeight;
					var noticesHeight=document.getElementById('child_article').offsetHeight;
					maxMargin=defaultHeight-noticesHeight;
					var scrollAmount=100-ui.value;
					$('#child_article').css("margin-top", Math.round(
						scrollAmount / 100 * ( maxMargin )
					) + "px" );
				}
		});
		mousewheel();//integro il mouse
	
		function mousewheel(){//integra rotellina mouse
			$('#child_article')
			.live('mousewheel', function(event, delta) {
				var dir = delta > 0 ? 'Up' : 'Down';
				var actPos=$("#slider-vertical").slider("value");
				//sposta il cursore dello slider
				if(dir=="Up"){
					newPos=actPos+10;
					$("#slider-vertical").slider("value",newPos);
					
				}else{
					newPos=actPos-10;
					$("#slider-vertical").slider("value",newPos);
				}
				//sposta i contenuti
				defaultHeight=document.getElementById("article").offsetHeight;
				var noticesHeight=document.getElementById('child_article').offsetHeight;
				maxMargin=defaultHeight-noticesHeight;
				var scrollAmount=100-newPos;
				$('#child_article').css("margin-top", Math.round(
								scrollAmount / 100 * ( maxMargin )
							) + "px" );
				return false;
			});	
		}
});
<script>
...
<div id="article">
<div id="child_article">...</div>
</div>
<div id="slider-vertical"></div>

Ho 2 problemi

1. non riesco a visualizzare il pallino che scorre dello scrollbar.
2. mousewheel scorre solo in una direzione e delta mi da undefined