html为什么横向有滑动条,基于jquery的横向滚动条（滑动条）-jquery

查找了很多方法，有些不能实现(被滚动内容的宽度未知，但使用这种方法必须已知)，其它的不能完全兼容这些浏览器(IE6，Firefox，Chrome)。最后决定使用JQuery的Slider控件。

1. 下载jquery-1.3.2.min.js，jquery-ui-1.7.1.custom.min.js

2. Html

代码如下:

滚动内容

3. css

代码如下:

#topslider {

width: 98%;

height: 6px;

background: #BBBBBB;

position: relative;

}

#bottomslider {

width: 98%;

height: 6px;

background: #BBBBBB;

position: relative;

}

.ui-slider-handle {

width: 8px;

height: 14px;

position: absolute;

top: -4px;

background: #478AFF;

border: solid 1px black;

}

#scroll {

width: 100%;

margin-top: 10px;

overflow: hidden;

}

#holder {

width: 100%;

}

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'));

}