js滚动条

水平滚动条

拖动了才能拽动

// html
 <div id="scroll">
        <div id="bar"></div>
        <div id="mask"></div>
        <span></span>
    </div>

// js
<script>
var scroll=document.getElementById("scroll");
var bar=document.getElementById("bar");
var mask=document.getElementById("mask");
var span=document.getElementsByTagName("span")[0];
 var leftVal=0;
bar.onmousedown=function (event) {
var event=event||window.event;
 leftVal=event.clientX-this.offsetLeft;
 document.onmousemove=function (event) {
var event=event||window.event;
var newleft=event.clientX-leftVal;
window.getSelection ?window.getSelection().removeAllRanges():document.selection.empty();
if(newleft>400-bar.offsetWidth){
 newleft=400-bar.offsetWidth;
}else if(newleft<0){
 newleft=0;
}
bar.style.left=newleft+"px";
mask.style.width=newleft+"px";
span.innerHTML="已加载"+parseInt((newleft/(scroll.offsetWidth-bar.offsetWidth))*100)+"%";
 }
 document.onmouseup=function () {
document.onmousemove=null;
}
}
</script>

自己动（用了定时器的写法）

// html
 <script>
 var scroll=document.getElementById("scroll");
var bar=document.getElementById("bar");
var mask=document.getElementById("mask");
var span=document.getElementsByTagName("span")[0];
var timer=null;

bar.onclick=function () {
timer=setInterval(function () {
for(var i=0;i<400-bar.offsetWidth;i=i+0.1){
 if(i>400-bar.offsetWidth){
i=400-bar.offsetWidth;
clearInterval(timer);
 }
 bar.style.left=i+"px";
 mask.style.width=i+"px";
span.innerHTML="已加载"+parseInt((i/(scroll.offsetWidth-bar.offsetWidth))*100)+"%";
}
},10);
}
    </script>

竖直滚动条

拖动了才能拽动

// html
    <div id="scroll">
        <div id="content"> 二、获取event对象<br>
            在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。<br>
            Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。<br>
            事件通常与函数结合使用，函数不会在事件发生前被执行！<br>
            当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方——event对象，供我们在需要的时候调用<br>
            二、获取event对象<br>
            在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。<br>
            二、获取event对象
        </div>
        <div id="box">
        <div id="bar"></div>

// js
<script>
var scroll=document.getElementById("scroll");
var content=document.getElementById("content");
var box=document.getElementById("box");
var bar=document.getElementById("bar");
var barheight=0;m=0,t=0;
            barheight=scroll.offsetHeight*box.offsetHeight/content.offsetHeight;
bar.style.height=parseInt(barheight)+"px";
bar.onmousedown=function (event) {
var event = event||window.event;
t=event.clientY-this.offsetTop;
var that=this;

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
// 防止拖动滑块的时候， 选中文字
document.onmousemove=function (event) {
var event = event||window.event;
h=event.clientY-t;
if(h<0){
h=0;
}else if(h>scroll.offsetHeight-that.offsetHeight){
h=scroll.offsetHeight-that.offsetHeight;
 }
that.style.top=h+"px";
content.style.top=(-h*content.offsetHeight/scroll.offsetHeight)+"px";
}
}
document.onmouseup=function () {
document.onmousemove=null;
}