怎么让滚动条移到最后就结束..

要是li的个数不确定的情况下.
然后移动滚动条到最后,让ul列表也同时在最后.改怎么计算啊?
<!DOCTYPE HTML>
<html>
<head>
<title>soul42</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<STYLE type="text/css">
* { margin:0;  padding:0;}
body{width:100%;height:100%;}
#wrap{width:550px;height:8px;background:#ccc;margin:55px auto;position:relative}
#move{position:absolute;top:0;left:0;width:50px;height:8px;background:red;}
#list{width:550px;height:100px;overflow:hidden;position:relative;margin:0 auto}
#list ul{position:absolute;top:0;left:0;height:100px;}
#list ul li{width:100px;margin-right:10px;background:orange;height:100px;float:left;display:inline}
</STYLE></head>
<body><div id="list">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li></li>
<li>4</li>
<li>5</li>
<li>7</li>
<li>4</li>
<li>5</li>
<li>r32</li>
<li>4</li>
<li>5</li>
<li>9</li>
<li>10</li>
<li>4</li>
<li>5</li>
<li>r</li>
<li>s</li>
<li>5</li>
<li>9</li>
<li>w</li>
</ul>
</div><div id="wrap">
<div id="move">
</div>
</div>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id)}
var list = $("ul").getElementsByTagName("li");
$("ul").style.width = ((list[0].offsetWidth+10)*list.length) +"px";

var div = $("move");
var i=0;
div.onmousedown = function(e){
var posX = e.clientX-this.offsetLeft;
document.onmousemove = function(e){
var x = e.clientX - posX;
div.style.left = x+"px";
$("ul").style.left = parseInt("-"+(x*2)) +"px";
console.log(x)
if(div.offsetLeft < 0 ){
div.style.left ="0px";
}
if(div.offsetLeft > ($("wrap").offsetWidth -div.offsetWidth)){
div.style.left = ($("wrap").offsetWidth-div.offsetWidth) +"px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script></body>
</html>