效果图：
<!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>模拟滚动条</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<style>
*{ padding:0px; margin:0px;}
.div0{ width:1200px; margin:110px auto;}
.xxx{ height:100px; width:410px; border:1px solid #f00; position:relative; left:0px; top:0px; overflow:hidden;}
ul{ overflow:hidden;zoom:1; position:absolute; left:0px; top:0px;}
ul li{ list-style:none; width:200px; height:100px; background-color:#ccc; float:left; margin-right:10px;}
#waic{ width:410px; height:10px; background-color:#ccc;position:relative; left:0px; top:0px; margin-top:20px; position:relative;}
.div1{ cursor:pointer; width:60px; height:10px; background-color:#333; position:absolute; left:0px; top:0px; position:absolute; left:0px; top:0px;}
</style>
<script>
$(document).ready(function(){
//内容区
$(\'ul\').width($(\'ul li\').outerWidth(true)*$(\'ul li\').length-10);
$(\'ul li:last\').css(\'marginRight\',0);
//比例尺
//var oydWidth=$(\'#waic\').width()-$(\'.div1\').width();
var blc=($(\'#waic\').width()-$(\'.div1\').width())/($(\'ul\').width()-410);
//alert(oydWidth)
//alert(blc*$(\'ul\').width())
//拖拽
$(\'.div1\').mousedown(function(e){
var odivLeft=$(\'.div1\').position().left;
var odivTop=$(\'.div1\').position().top;
var odocLeft=e.pageX-odivLeft;
var odocTop=e.pageY-odivTop;
$(document).mousemove(function(e){
var X=e.pageX-odocLeft;
var Y=e.pageY-odocTop;
if(X<=0){
X=0;
}else if(X>=$(\'#waic\').width()-$(\'.div1\').outerWidth(true)){
X=$(\'#waic\').width()-$(\'.div1\').outerWidth(true);
};
if(Y<=0){
Y=0;
}else if(Y>=$(\'#waic\').height()-$(\'.div1\').outerHeight(true)){
Y=$(\'#waic\').height()-$(\'.div1\').outerHeight(true);
};
$(\'.div1\').css({\'left\':X+\'px\',\'top\':Y+\'px\'});
$(\'ul\').animate({\'left\':-X/blc+\'px\'}).dequeue();
});
$(document).mouseup(function(){
$(this).unbind(\'mousemove\');
});
});
});
</script>
<body>
<div class="div0">
<div class="xxx">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="waic">
<div class="div1"></div>
</div>
</div>
</body>
</html>