配合鼠标滚轮事件的可自定义样式的区域滚动条插件（基于jquery）

预览效果：

CSS：

.scrollbar{ margin:20px;300px;height:300px; background:#303030; color:#CCC;}
.scrollbar-track{ float:right;height:300px;14px; background:#3C3C3C;}
.scrollbar-handle{ background:#616161; height:80px; border-radius:7px; cursor:pointer;}
.handle-hover{ background:#777;}
.scrollbar-area{float:left290px;height:300px; overflow:hidden}

DOM:

 <div class="J_PZScrollbar scrollbar" data-dir="y">
	<div class="scrollbar-track">
    	<div class="scrollbar-handle"></div>
    </div>
	<div class="scrollbar-area">
    	<div class="scroll-content">
    		<p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
    	<p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
    	<p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
    	<p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
    	<p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
    	<p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
    	<p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
        <p>wefwefwef</p>
    
        </div>
    </div>
</div>

JS:

(function(){
	/**
	@基于jQuery滚动条插件
	@修改css来实现需要的效果。
	@页面可出现多个类似插件，只要复制dom结构到对应位置即可。
	@杨永
	@QQ:377746756
	@call:18911082352
	@版本:1.0
	*/
	function PZScrollbar(object){
		var _this_=this;
		//保存传递将来的对象
		this.scrollObject=object;
		//获取方向属性
		this.dir=this.scrollObject.attr("data-dir");
		//保存滚动对象
		this.scrollContent=$(".scroll-content",object);
		//获取滚动内容于于可视区域的比例
		this.beishu={
			mx:$(".scroll-content",object).width()/$(".scrollbar-area",object).width(),
			my:$(".scroll-content",object).height()/$(".scrollbar-area",object).height()
		};
		//保存拖动句柄
		this.scrollHandle=$(".scrollbar-handle",object);
		//设置滑块的尺寸
		this.setScrollHandleSize();
		//保存拖动句柄的父节点相对页面的偏移,尺寸
		this.scrollHandleAreaPos={
			top:this.scrollHandle.parent().offset().top,
			left:this.scrollHandle.parent().offset().left,
			this.scrollHandle.parent().width(),
			height:this.scrollHandle.parent().height(),
			maxY:this.scrollHandle.parent().height()-this.scrollHandle.height(),
			maxX:this.scrollHandle.parent().width()-this.scrollHandle.width()
		};
		//获取滚动时他们之间的滚动关系倍数
		this.scrollBeishu={
			y:($(".scroll-content",object).height()-this.scrollHandle.parent().height())/(this.scrollHandle.parent().height()-this.scrollHandle.height()),
			x:($(".scroll-content",object).width()-this.scrollHandle.parent().width())/(this.scrollHandle.parent().width()-this.scrollHandle.width())
		};
		//初始化鼠标按下时，鼠标相对于滑动句柄的偏移值
		this.mouseDownHandlePos={
			top:null,
			left:null
		};
		this.scrollHandle.mousedown(function(e){
			var _this=this;
			//当鼠标按下时，设置鼠标相对于滑动句柄的偏移值
			_this_.mouseDownHandlePos={
				top:e.pageY-$(this).offset().top,
				left:e.pageX-$(this).offset().left
			};	
			//当鼠标按下的时，就绑定document的鼠标移动事件
			$(document).mousemove(function(e){
				//当移动的时候清除掉选中文本
				if(document.selection&&document.selection.empty){//清楚IE选中文本
					document.selection.empty();
				}else if(window.getSelection){//清楚FF选中文本
					window.getSelection().removeAllRanges();
				};
				//当鼠标在页面上移动的时候，实时计算出滑块的偏移值
				var offset=_this_.getScrollHandleOffset(
															{
																top:e.pageY-_this_.scrollHandleAreaPos.top,
																left:e.pageX-_this_.scrollHandleAreaPos.left
															},
															{
																top:_this_.mouseDownHandlePos.top,
																left:_this_.mouseDownHandlePos.left
															}
														);
				if(_this_.dir=="y"){
					_this_.animateScroll(offset.top,_this);	
				}else{
					_this_.animateScroll(offset.left,_this);			
				};
			}).mouseup(function(){
				//当鼠标抬起的时候解绑定
				$(this).unbind("mousemove");
			});
		}).hover(function(){
			$(this).addClass("handle-hover");
		},function(){
			$(this).removeClass("handle-hover");
		});
		//指定一个默认计数
		this.loop=0;
		//给整个对象绑定滚轮事件
		if(window.addEventListener){
			this.scrollObject.get(0).addEventListener("DOMMouseScroll",function(e){
				e.preventDefault();
				_this_.toHandleTopValue(e.detail);
			},false);
			this.scrollObject.get(0).addEventListener("mousewheel",function(e){
				e.preventDefault();
				//为了兼容chrom
				_this_.toHandleTopValue(e.wheelDelta<0?120:-120);
			},false);
		}else{
			this.scrollObject.get(0).attachEvent("onmousewheel",function(e){
				e.returnValue=false;
				_this_.toHandleTopValue(e.wheelDelta<0?120:-120);
			})	;
		};
	}
	PZScrollbar.prototype={
		//当滚轮滚动的时候驱动滑块的位置
		toHandleTopValue:function(e){
			//判断鼠标的滚动方向
			if(e>0){
				this.loop+=20;
				if(this.dir=="y"){
					if(this.loop>=this.scrollHandleAreaPos.maxY){
						this.loop=this.scrollHandleAreaPos.maxY;
					};
				}else{
					if(this.loop>=this.scrollHandleAreaPos.maxX){
						this.loop=this.scrollHandleAreaPos.maxX;
					};
				};
				this.animateScroll(this.loop,this.scrollHandle);
			}else{
				this.loop-=20;
				if(this.loop<=0){this.loop=0;};
				this.animateScroll(this.loop,this.scrollHandle);
			};	
		},
		//驱动滚的区域
		animateScroll:function(margin,thisObj){
			//在鼠标拖动的时候把偏移值设置给计数器
			this.loop=margin;
			//判断节点传递滚动方向
			if(this.dir=="y"){
				$(thisObj).css("marginTop",margin+"px");	
				this.scrollContent.css("marginTop",-margin*this.scrollBeishu.y+"px");	
			}else{
				$(thisObj).css("marginLeft",margin+"px");	
				this.scrollContent.css("marginLeft",-margin*this.scrollBeishu.x+"px");
			};
		},
		//按照比例设置滑块的尺寸
		setScrollHandleSize:function(){
			if(this.dir=="y"){
				this.scrollHandle.height(this.scrollHandle.parent().height()/this.beishu.my+"px");
			}else{
				this.scrollHandle.width(this.scrollHandle.parent().width()/this.beishu.mx+"px");
			}
		},
		//计算出滑动句柄相对于滑动区域的便宜
		getScrollHandleOffset:function(mouse,offset){
			var x,y;
				if(mouse.top-offset.top<=0){
					y=0;
				}else{
					y=mouse.top-offset.top
				};
				if(mouse.top-offset.top>=this.scrollHandleAreaPos.maxY){
					y=this.scrollHandleAreaPos.maxY;
				};
				if(mouse.left-offset.left<=0){
					x=0;
				}else{
					x=mouse.left-offset.left
				};
				if(mouse.left-offset.left>=this.scrollHandleAreaPos.maxX){
					x=this.scrollHandleAreaPos.maxX;
				};				
				return {top:y,left:x};	
		}
	};
	PZScrollbar.init=function(scrolls){
		var _this=this;
		scrolls.each(function(){
			new _this($(this));
		});
	};
	window["PZScrollbar"]=PZScrollbar;
})();

　　

调用方式：

1，首先要链接Jquery库

2，可以自由修改css，来实现需要的效果

3,页面可以出现多个类似的插件

执行创建所有滚动条插件

$(function(){
	//初始化页面所以需要滚动条的区域
	PZScrollbar.init($(".J_PZScrollbar"));
});