scrollbar et clignottement en bout de course

Bonjour à tous, voilà je suis en train de créer une scrollbar dans un div, j'utilise marginTop de la scrollbar pour éviter que celle-ci dépasse le div, le problème c'est que lorsque j'arrive aux extrémités la scrollbar clignote. Je pense que le problème viens de la mise en écoute de la souris mais je ne sais pas comment résoudre le problème. Pouvez vous m'aider svp ? Merci d'avance. Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html>
	<head>
		<title>test</title>
		<style type="text/css">
			#scrollbar
			{
				position:absolute;
				margin-left:185px;
				/*margin-top:35px;*/
			}
 
			#bloc
			{
				border:solid 2px black;
				width:200px;
				height:300px;
				overflow:hidden;
			}
 
 
		</style>
 
 
		<script type="text/javascript">
			var scrollbar=false;
 
			function init()
			{
				document.getElementById("scrollbar").style.marginTop="32px";
 
				if(!navigator.appName=="Microsoft Internet Explorer")
					document.getElementById("scrollbar").addEventListener("mousedown",dep_scroll,false);
				else
					document.getElementById("scrollbar").attachEvent("onMouseDown", dep_scroll);
 
 
			}
 
 
			function dep_scroll(objet_event)
			{
				objet_event = objet_event || window.event;
 
				/*permet de supprimmer le drag and drop du navigateur*/
					if(objet_event.preventDefault)
					{
							objet_event.preventDefault();
					}
 
					/*Lorsque l'évènement survient on fait appel à la fonction position*/
					document.onmousemove=position;
			}
 
			function position(ev)
			{				
				ev = ev || window.event;
				ev.returnValue=false;
 
				var coordY;
 
				if(navigator.appName=="Microsoft Internet Explorer")
				{
					/*on récupère la position en Y de la souris*/
					coordY=window.event.clientY;
				}
				else
				{
					/*on récupère la position en Y de la souris*/
					coordY=ev.clientY;
				}
 
				/*comme le curseur de la souris accroche au coin en haut à gauche, je retire la moitié
				de la taille de l'image pour placer le curseur au centre*/
				coordY=coordY-37;
 
				var position_scroll=document.getElementById("scrollbar").style.marginTop;
 
				//on récupère la taille de la chaine
				var taille=position_scroll.length;
 
				//on retire px de la chaine pour pouvoir traiter position_scroll comme un chiffre
				position_scroll=position_scroll.substring(0,taille-2);
 
 
				if(position_scroll<30)
				{
					document.getElementById("scrollbar").style.marginTop="30px";
					ev.clientY=30;
				}
				else if(position_scroll>192)
				{
					document.getElementById("scrollbar").style.marginTop="192px";
					ev.clientY=192
				}
				else
				{
					/*on affecte ensuite l'émargement haut et gauche de l'image à la position de la souris en Y*/
					document.getElementById("scrollbar").style.marginTop=coordY+"px";
				}
 
 
			}
 
			function stop_dep()
			{
				document.onmousemove=null;
			}
 
 
		</script>
	</head>
	<body onLoad="init();" onMouseUp="stop_dep();">
	<div id="bloc">
		<img id="scrollbar" src="scrollbar.png" onMouseDown="dep_scroll(event);" />
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
		blabla<br>
	</div>
	<div id="position"></div>
 
	</body>
</html>