利用原生js实现自定义滚动条（可点击到达，拖动到达）

1.HTML文件

div1是滚动条，div2是滚动小球，div3是文本区域容器，div4是文本区域。

<div id="div">
	<div id="div1">
		<div id="div2">	</div>
	</div>
	<div id="div3">
		<div id="div4">
			<p>CSS3 教程</p>
			<p>CSS3 教程</p>
			<p>CSS3 简介</p>
			<p>CSS3 边框</p>
			<p>CSS3 圆角</p>
			<p>CSS3 背景</p>
			<p>CSS3 渐变</p>
			<p>CSS3 文本效果</p>
			<p>CSS3 字体</p>
			<p>CSS3 2D 转换</p>
			<p>CSS3 3D 转换</p>
			<p>CSS3 过渡</p>
			<p>CSS3 动画</p>
			<p>CSS3 多列</p>
			<p>CSS3 用户界面</p>
			<p>CSS3 图片</p>
			<p>CSS3 按钮</p>
			<p>CSS3 分页</p>
			<p>CSS3 框大小</p>
			<p>CSS3 弹性盒子</p>
			<p>CSS3 多媒体查询</p>
			<p>CSS3 多媒体查询实例</p>
		</div>
	</div>
</div>

2.css样式文件

通过容器溢出隐藏，文本区域的绝对定位，然后再交给js处理。

*{
    padding: 0; margin: 0;}
#div{
    top:200px;left:25%;width: 50%;height: 300px; position: absolute; 
}
#div1{
    width: 20px; height: 300px; position: relative; 
background: #CCCCCC; border-radius: 28px; float: right; cursor: pointer;}
#div1 #div2{
    left: -4px;width: 28px;height: 28px;border-radius: 50%; background: red;
position: absolute;}

#div3{
    width: 90%; height: 300px; border: 2px solid #CCCCCC;
position: relative; float: left; overflow: hidden;}
#div3 #div4{
    top:0;left:0;width: 100%; position: absolute; font-family: "微软雅黑";
font-size: 19px; letter-spacing: 1px; padding: 3px 6px;}

3.js脚本代码

window.onload =function(){
    
	var allDiv =document.getElementById('div');
	var oDiv =document.getElementById('div2');
	var aDiv =document.getElementById('div1');
	var textDiv1 =document.getElementById('div3');
	var textDiv2 =document.getElementById('div4');
	
	// 进度条拖动，内容跟着运动事件
	oDiv.onmousedown =function(ev){
    
		var oEvent =ev||event;
		
		var disY =oEvent.clientY -oDiv.offsetTop;
		
		if(oDiv.setCapture){
    
			oDiv.onmousemove =mouseMove;
			oDiv.onmouseup =mouseUp;
			
			oDiv.setCapture();
		}else{
    
			document.onmousemove =mouseMove;
			document.onmouseup =mouseUp;
		}
		
		function mouseMove(ev){
    
			var oEvent =ev||event;						
			var t =oEvent.clientY -disY;					
			var bottomLine = aDiv.offsetHeight-oDiv.offsetHeight;	
			
			
			if(t <0){
    
				t =0;
			}else if(t >bottomLine){
    
				t =bottomLine;
			}
			
	        var percent =t/272;
	        
			oDiv.style.top =t+'px';
			textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';
			
		};
		
		function mouseUp(){
    
			this.onmousemove =null;
			this.onmouseup =null;
			
			if(oDiv.releaseCapture){
    
				oDiv.releaseCapture();
			}
		};
	
	    return false;
	};
	
	// 点击进度条，开启定时器，小球做匀速运动到达后，清楚定时器
	aDiv.onmousedown=function(ev){
    
		var oEvent =ev||event;					
		var divY =oEvent.clientY-allDiv.offsetTop;
		var timer =null;var speed=10;
		
		
		clearInterval(timer)
		timer = setInterval(function(){
    
			var percent=oDiv.offsetTop/272;
			
			
			if(oDiv.offsetTop<divY-28){
    
				oDiv.style.top =oDiv.offsetTop + speed +'px';
				textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
			}else if(oDiv.offsetTop>divY){
    
				oDiv.style.top =oDiv.offsetTop - speed +'px';
				textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
			}else if(oDiv.offsetTop>260){
    
				oDiv.offsetTop = 272+'px';
				clearInterval(timer);
			}else if(oDiv.offsetTop<10){
    
				oDiv.offsetTop = 0+'px';
				clearInterval(timer);
			}else{
    
				clearInterval(timer);
			}
			
			
		},10);
		
	}
	
	
	
}