横向滚动条（滑动条）

ASP.Net的GridView本身不带滚动条，可通过Panel实现。但是Windows自带的横向滚动条只支持显示在下方，为了使用方便，需要在上下方都显示横向滚动条。

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

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

2. Html

<div id="topslider" runat="server"></div>
<div id="scroll" runat="server">
  <div id="holder">
    滚动内容
  </div>
<div id="bottomslider" style="margin-top:10px;margin-bottom:10px;" runat="server"></div>

3. css

<style>
    #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%;
    }
  </style>

4. js

<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.7.1.custom.min.js"></script>

$(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'));
}