Создание своей собственной прокрутки для блока
 

Всем привет. Вот периодически натыкаюсь на сайтах на различные колонки новостей у которых имеется ограниченная высота но для которых есть возможность прокрутки содержимого.
Конечно подобное легко делается при помощи такой штуки как overflow:scroll; но внеше выглядит не очень приятно. А что если я хочу допустим в качестве ползунка использовать какой нибудь смайлик, картинку или еще что то? Вот и решил сделать свой скрипт на прокрутку содержимого внутри блока.
То есть у меня есть блок обертка с ограниченной высотой и свойством overflow:hidden; и блок с содержимым который находится внутри и высота которого превышает высоту блока обертки.
Саму идею реализовать вроде бы удалось, но теперь возник вопрос об улучшении.
Вот код, а дальше вопрос по улучшению:

var wrapper, block, scrollBlock, scrollicon, nowMouse, nowMouse2, nowMouse3, testVar;
var point = false;
var point2 = false;
window.onload = function(){
	wrapper = document.getElementsByClassName("wrapper").item(0);
	block = document.getElementsByClassName("block").item(0);
	scrollBlock = document.getElementsByClassName("scrollBlock").item(0);
	scrollicon = document.getElementsByClassName("scrollicon").item(0);
	test_scroll();
	scrollicon.onmousedown = icon_scroll_down;
	document.onmouseup = function(){point=false;}
	document.onmousemove = icon_scroll_move;
}
function test_scroll(){ // проверка высоты блока
	if(block.offsetHeight>wrapper.offsetHeight){ 
		scrollBlock.style.display = "block"; scrollicon.style.display = "block";
		scrollBlock.style.height = block.offsetHeight+"px";
	}
	else{
		scrollBlock.style.display = "none"; scrollicon.style.display = "none";
	}
}
function icon_scroll_down(e){ //функция активации ползунка
	nowMouse = e.clientY-scrollicon.offsetTop; point=true; test_out();
}
function icon_scroll_move(e){ //функция движения ползунка
	if(point){
		e.preventDefault();
		e.stopPropagation();
		scrollicon.style.top = (e.clientY - nowMouse)+"px";
		if(scrollicon.offsetTop<0){ scrollicon.style.top=0; }
		else if(scrollicon.offsetTop>wrapper.offsetHeight-scrollicon.offsetHeight)
		scrollicon.style.top=(wrapper.offsetHeight-scrollicon.offsetHeight)+"px";
		var nowMouse3 = wrapper.offsetHeight-scrollicon.offsetHeight
		var wrapperPercent = nowMouse3/100;
		var blockPercent = (block.offsetHeight-nowMouse3)/100;
		nowMouse2 = (scrollicon.offsetTop/wrapperPercent).toFixed(2);
		block.style.marginTop = -(nowMouse2*blockPercent).toFixed(0)+"px";
		testVar = block.style.marginTop;
		test_out();
	}
}

$(function(){
	$('.wrapper').bind('mousewheel', function(event) {
	event.preventDefault();
	testVar = this.offsetHeight;
	var scrollTop = this.scrollTop;
	this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
	});
});
function test_out(){
	document.getElementsByClassName("test").item(0).innerHTML = testVar;
}

Вопрос: прокрутка сделана и работает только если перетягивать ползунок , хотелось бы сделать так что бы была возможность прокрутки при наведении мыши на блок с помощью активации колесика мыши, ну как в обычных страницах, крутишь колесико двигается страница. (Пытался пошаманить с событием block.onscroll но как то не особо получилось), был бы вам очень благодарен за помощь в этом деле.

Да и примечание, решить задачу нужно только при помощи JS без jQuery.

(Если надо напишите в комментариях могу выложить весь код вместе с HTML и CSS рабочей страницы)

Ну вот пожалуй и все :)

Все гоcпода, все таки смог разобраться :)
Просто не знал про событие onmousewheel

var wrapper, block, point2 = false;
window.onload = function(){
	wrapper = document.getElementsByClassName("wrapper").item(0);
	block = document.getElementsByClassName("block").item(0);
	wrapper.onmouseover = function(){point2=true;test_out();}
	wrapper.onmouseout = function(){point2=false;test_out();}
	wrapper.onmousewheel = mouseScrollBlock;
}
function mouseScrollBlock(e){
	if(point2){
		scrollTop+=-e.deltaY;
		if(scrollTop>0) scrollTop = 0;
		if(scrollTop<-(block.offsetHeight-wrapper.offsetHeight))
		scrollTop = -(block.offsetHeight-wrapper.offsetHeight);
		block.style.marginTop = scrollTop+"px";
		test_out();
	}
}