废话不多说，直接贴代码吧；
效果
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
1 ;(function($){
2 $.extend($.fn,{
3 scrollPlugin:function(options){//美化滚动插件
4 var defaults = {
5 Direction : 1, //滚动条方向 1为Y轴 -1为X轴
6 mouseWheelSpeed : 300, //鼠标滑轮滚动速度
7 clickSpeed : 10 //上下点击滚动速度
8 };
9 var options = $.extend(defaults,options);
10 this.each(function(){
11 var self=this;//当前变量传给变量，以便多次使用
12 var $Content=$('.scrollContent',self);//滚动区域内容
13 var $slide=$('.ui-scrollBar',self);//滑动块
14 var $scrollDragger=$('.scrollDragger',self);//整个滑动块所在盒子
15 var $scrollBar=$('.scrollBar',self);//滑块所在区域
16 var $scrollUpBtn=$('.scrollUpBtn',self);//向上点击按钮
17 var $scrollDownBtn=$('.scrollDownBtn',self);//向下点击按钮
18 var S={
19 Init:function(){
20 this.scrollBoxWidth=$(self).width();//整个区域盒子总宽度
21 this.currentPageY=0;//滑动过程中所在位置
22 this.currentScrollTop=0;//滑动前滑动块所在位置
23 this.ContentHeight=$Content.outerHeight(true);//滚动内容区域高度
24 this.ContentWidth=null;//滚动内容宽度
25 this.scrollBarHeight=null;//滑动块活动范围高度
26 this.slideHeight=$slide.height();//滑动块高度
27 this.scrollDraggerHeight=$scrollDragger.height();//整个滑动块所在盒子高度
28 this.scrollDraggerWidth=$scrollDragger.outerWidth(true);//整个滑动块所在盒子宽度
29 this.scrollUpBtnHeight=$scrollUpBtn.outerHeight(true);//向上点击按钮高度
30 this.scrollDownBtnHeight=$scrollDownBtn.outerHeight(true);//向下点击按钮高度
31 this.enableContentHeight=this.ContentHeight-this.scrollDraggerHeight;//显示区域最大滚动高度
32 this.contentScrollHeight=0;//滚动内容区域移动高度
33 if(this.ContentHeight<this.scrollDraggerHeight){//判断是否显示滚动条
34 $scrollDragger.hide();
35 $Content.css('width','100%');//为显示区域内容添加100%宽度
36 return ; //退出主函数
37 }
38 $scrollDragger.show();
39 $Content.css('width',this.scrollBoxWidth-this.scrollDraggerWidth);//为显示区域内容添加除去滚动条宽度
40 this.setScrollBarHeight(this.scrollDraggerHeight,this.scrollUpBtnHeight,this.scrollDownBtnHeight);//设置滑动区域高度
41 this.scrollEnableHeight=this.scrollBarHeight-this.slideHeight;//滑块可拖动最大高度
42 $slide.bind('mousedown',this.mouseDownOnSlider);//滑块按下FUN
43 $scrollBar.bind('click',this.clickOnSlider);//单击滑块所在区域FUN
44 $scrollUpBtn.bind('click',{data:'up'},this.scrollClickBtnSlider);//向上单击滑块
45 $scrollDownBtn.bind('click',{data:'down'},this.scrollClickBtnSlider);//向下单击滑块FUN
46 $Content.bind('mousewheel',this.contentMouseWheel);//滚动区域滑轮FUN
47 },
48 contentMouseWheel:function(e,delta){
49 e.preventDefault();
50 $scrollBar.addClass('hover');
51 switch(delta){
52 case -1 : S.contentMouseDownWheel(); break;
53 case 1 : S.contentMouseUpWheel(); break;
54 default : break;
55 };
56 var scrollBarTop=($Content.position().top+S.contentScrollHeight)*S.scrollEnableHeight/S.enableContentHeight-15;//计算出滚动条位置
57 S.mainAnimate(scrollBarTop,S.contentScrollHeight);//调用定位FUN
58 },
59 contentMouseUpWheel:function(){//滑轮向上滚动
60 S.contentScrollHeight-=options.mouseWheelSpeed;
61 S.contentScrollHeight=Math.max(0,S.contentScrollHeight);
62 },
63 contentMouseDownWheel:function(){//滑轮向下滚动
64 S.contentScrollHeight+=options.mouseWheelSpeed;
65 S.contentScrollHeight=Math.min(S.enableContentHeight,S.contentScrollHeight);
66 },
67 mouseDownOnSlider:function(e){
68 $scrollBar.addClass('hover');
69 S.currentScrollTop=$slide.position().top;//滑块按下去时初始位置
70 S.currentPageY=e.pageY;//滑块按下去时鼠标位置
71 $(document).bind({
72 'mousemove':S.mouseMoveOnDocument,//滑块移动FUN
73 'mouseup':S.mouseUpOnDocument,//滑块鼠标松开FUN
74 'mouseout':S.mouseOutOnDocument,//滑块移开FUN
75 'selectstart':S.selectStartOnDocument,//防止滑动过程中内容被选中,针对IE
76 'selectable':'on'//防止滑动过程中内容被选中,针对Opera
77 });
78 },
79 mouseMoveOnDocument:function(e){
80 S.barMoveOnSlider(e.pageY,S.currentPageY,S.currentScrollTop);//参数:滑块滑动时鼠标位置
81 },
82 mouseOutOnDocument:function(){
83 if($scrollBar.hasClass('hover')){
84 $scrollBar.addClass('hover');
85 }
86 },
87 clickOnSlider:function(e){
88 if(e.target.className!='plugin ui-scrollBar'){
89 S.currentScrollTop=$slide.position().top;
90 var currentBarScrollTop=S.currentScrollTop;
91 var stopBarScrollTop=e.pageY-$slide.offset().top+currentBarScrollTop;
92 stopBarScrollTop>=currentBarScrollTop?S.barMoveOnSlider(stopBarScrollTop,0,-S.slideHeight):S.barMoveOnSlider(stopBarScrollTop,0,0);
93 };
94 },
95 scrollUpBtnOnSlider:function(){
96 S.currentScrollTop-=options.clickSpeed;
97 S.currentScrollTop=Math.max(0,S.currentScrollTop);
98 },
99 scrollDownBtnSlider:function(){
100 S.currentScrollTop+=options.clickSpeed;
101 S.currentScrollTop=Math.min(S.scrollEnableHeight,S.currentScrollTop);
102 },
103 scrollClickBtnSlider:function(e){
104 $scrollBar.addClass('hover');
105 S.currentScrollTop=$slide.position().top;
106 var currentBarScrollTop=S.currentScrollTop;
107 var e=e.data.data;
108 switch(e){
109 case 'up' : S.scrollUpBtnOnSlider(); break;
110 case 'down' : S.scrollDownBtnSlider(); break;
111 default : break;
112 }
113 S.barMoveOnSlider(S.currentScrollTop,currentBarScrollTop,currentBarScrollTop);
114 },
115 barMoveOnSlider:function(a,b,c){
116 $('body').css({'-moz-user-select':'none','-o-user-select':'none','user-select':'none'});
117 var scrollHeight=a-b;//滑块滑动的高度
118 var scrollBarTop=scrollHeight+c;//最终滑块距离顶部距离
119 scrollBarTop=Math.min(Math.max(0,scrollBarTop),S.scrollEnableHeight);//将滑块拖动区域限定在可拖动区域里
120 S.contentScrollHeight=(scrollBarTop/S.scrollEnableHeight)*S.enableContentHeight; //计算出滚动内容区域移动高度
121 S.mainAnimate(scrollBarTop,S.contentScrollHeight);//调用定位FUN
122 },
123 mainAnimate:function(a,b){
124 $slide.css('top',a);//移动滑块
125 $Content.stop().animate({'marginTop':-b},300,'linear',function(){$scrollBar.removeClass('hover');});//移动显示区域内容
126 },
127 selectStartOnDocument:function(){
128 return false;//防止页面内容被选中IE
129 },
130 mouseUpOnDocument:function(){
131 $('body').css({'-moz-user-select':'text','-o-user-select':'text','user-select':'text'});
132 $scrollBar.removeClass('hover');
133 $(document).bind('selectable','off').unbind({
134 'mousemove':S.mouseMoveOnDocument,//撤销移动FUN
135 'selectstart':S.selectStartOnDocument//撤销被选中FUN
136 });
137 },
138 setScrollBarHeight:function(a,b,c){
139 S.scrollBarHeight=a-b-c;//计算出滑动区域高度
140 $('.scrollBar',self).css('height',S.scrollBarHeight);//赋给样式
141 }
142 };
143 S.Init();//调用命名空间S
144 });
145 return this;
146 }
147 });
148 })(jQuery);
149
150 $(function(){
151 $('.scrollItem').scrollPlugin({
152 mouseWheelSpeed : 200,
153 clickSpeed : 10
154 });
155 })
1 /* scrollItem */
2 .plugin{background-image:url(../images/plugin.png); background-repeat:no-repeat;}
3 .scrollItem{ width:400px; height:400px; background:#fff; margin:100px auto; overflow:hidden; background:#f7f7f7;}
4 .scrollContent{ float:left;}
5 .scrollDragger{ float:right; position:relative; height:100%; width:12px;}
6 .scrollDragger .scrollUpBtn,.scrollDragger .scrollDownBtn{ display:block; width:12px; height:13px; cursor:pointer; position:absolute; left:0px;}
7 .scrollDragger .scrollUpBtn{ background-position:-1px -1px; top:0px; margin-bottom:5px;}
8 .scrollDragger .scrollDownBtn{ background-position:-1px -16px; bottom:0px; margin-top:5px;}
9 .scrollDragger .scrollUpBtn:hover{background-position:-16px -1px;}
10 .scrollDragger .scrollDownBtn:hover{background-position:-16px -16px;}
11 .scrollDragger .scrollBar{ width:2px;background:#d0d0d0; margin:0px auto; position:relative; top:18px;}
12 .scrollDragger .scrollBar .ui-scrollBar{ width:4px; position:absolute; left:-1px; top:0px; border-radius:4px; background:#999; cursor:pointer; height:200px;}
13 .scrollDragger .scrollBar:hover,.scrollDragger .scrollBar.hover{ background:#99d0e2;}
14 .scrollDragger .scrollBar:hover .ui-scrollBar{background:#58bfef;}
15 .scrollDragger .scrollBar.hover .ui-scrollBar{cursor:s-resize;background:#0095c7;}
1 <div class="scrollItem">
2 <div class="scrollContent">
3 <p>开始开始开始开始开始开始开始开始开始开始开始开始开始开始开始开始</p>
4 <p>22222222222222</p>
5 <p>33333333333333</p>
6 <p>4444444444444444</p>
7 <p>555555555555555555</p>
8 <p>66666666666666666</p>
9 <p>777777777777777</p>
10 <p>88888888888888888888</p>
11 <p>99999999999999999999</p>
12 <p>10101000000000000000</p>
13 <p>111111111111111111111111111111111</p>
14 <p>12121212</p>
15 <p>131313</p>
16 <p>141414</p>
17 <p>regsdfgdsfg</p>
18 <p>sdfgsdfgsdfgsdfg</p>
19 <p>1533452345</p>
20 <p>2346256546734</p>
21 <p>689578957</p>
22 <p>213413241234</p>
23 <p>679579579</p>
24 <p>11111111111111111111111111111</p>
25 <p>22222222222222</p>
26 <p>33333333333333</p>
27 <p>4444444444444444</p>
28 <p>555555555555555555</p>
29 <p>66666666666666666</p>
30 <p>777777777777777</p>
31 <p>88888888888888888888</p>
32 <p>99999999999999999999</p>
33 <p>10101000000000000000</p>
34 <p>111111111111111111111111111111111</p>
35 <p>12121212</p>
36 <p>131313</p>
37 <p>141414</p>
38 <p>regsdfgdsfg</p>
39 <p>sdfgsdfgsdfgsdfg</p>
40 <p>1533452345</p>
41 <p>2346256546734</p>
42 <p>689578957</p>
43 <p>213413241234</p>
44 <p>679579579</p>
45 <p>11111111111111111111111111111</p>
46 <p>22222222222222</p>
47 <p>33333333333333</p>
48 <p>4444444444444444</p>
49 <p>555555555555555555</p>
50 <p>66666666666666666</p>
51 <p>777777777777777</p>
52 <p>88888888888888888888</p>
53 <p>99999999999999999999</p>
54 <p>10101000000000000000</p>
55 <p>111111111111111111111111111111111</p>
56 <p>12121212</p>
57 <p>131313</p>
58 <p>141414</p>
59 <p>regsdfgdsfg</p>
60 <p>sdfgsdfgsdfgsdfg</p>
61 <p>1533452345</p>
62 <p>2346256546734</p>
63 <p>689578957</p>
64 <p>213413241234</p>
65 <p>完成完成完成完成完成完成完成完成完成完成完成完成完成完成完成完成</p>
66 </div>
67 <div class="scrollDragger">
68 <a href="javascript:;" class="plugin scrollUpBtn"></a>
69 <div class="scrollBar">
70 <div class="plugin ui-scrollBar"></div>
71 </div>
72 <a href="javascript:;" class="plugin scrollDownBtn"></a>
73 </div>
74 </div>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
