查找了很多方法，有些不能实现（被滚动内容的宽度未知，但使用这种方法必须已知），其它的不能完全兼容这些浏览器（ie6，firefox，chrome）。最后决定使用jquery的slider控件。
1. 下载jquery-1.3.2.min.js，jquery-ui-1.7.1.custom.min.js
2. html
复制代码 代码如下:
滚动内容
3. css
复制代码 代码如下:
4. js
复制代码 代码如下:
$(document).ready(function(){
$(#topslider).slider({
animate: true,
change: handlesliderchange,
slide: handlesliderslide,
stop:handletopsliderstop
});
$(#bottomslider).slider({
animate: true,
change: handlesliderchange,
slide: handlesliderslide,
stop:handlebottomsliderstop
});
});
function handlesliderchange(e, ui)
{
var maxscroll = $(#scroll).attr(scrollwidth) - $(#scroll).width();
$(#scroll).animate({scrollleft: ui.value * (maxscroll / 100) }, 1000);
}
function handlesliderslide(e, ui)
{
var maxscroll = $(#scroll).attr(scrollwidth) - $(#scroll).width();
$(#scroll).attr({scrollleft: ui.value * (maxscroll / 100) });
}
function handletopsliderstop(e, ui)
{
$(#bottomslider).slider('value',$(#topslider).slider('value'));
}
function handlebottomsliderstop(e, ui)
{
$(#topslider).slider('value',$(#bottomslider).slider('value'));
}