leonaScroll-1.1最新版-竖向
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js，此滚动条仅支持竖向滚动，如您在使用过程中发现更多问题，欢迎指正！
更新：1.1版本
1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂
2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由
3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置
4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示
5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度
使用方法：
1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件
2、使用$("").LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
3、属性说明：
speed 滚动速度，必须
scroll_text 滚动文本内容class，必须
sWidth 滚动条宽度，必须
updownH 上下微调按钮高度，必须
scrollbar 文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true
text_width 滚动文本宽度，可选
leonaScroll-1.0仅供学习参考使用，该版本为本人学习时思路版，尚有不足，新版本修复了很多问题，但仍然存在着二次调用问题。不过已经有了解决方案，只是本人比较赖，没有修复，等待1.2版本修复吧！哈哈！
当然如果有人使用后遇到bug或者不方便的地方，欢迎提出，以便本人继续改进。
学习之余写的小插件，如有什么不足之处，还望见谅。
最后感谢在本插件开发过程中，帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑！
废话不说了，附js代码和下载地址
一、Html+Css
1 2 3 4 56 7 8 9 10 18 19 20 21 2230 31232924 leonaScroll-1.1.js 2528
介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义滚动条 26
(未超出可显示文本区域时，要求显示滚动条) 273243 44334234 leonaScroll-1.1.js 3541
欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！ 36
作者：leona 37
发布时间：2016-6-16 38
博客：http://www.cnblogs.com/leona-d/ 39
(未超出可显示文本区域时，默认不显示滚动条) 404568 74 75 76466747 leonaScroll-1.1.js 4866
欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！ 49
更新：1.1版本 50
1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂 51
2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由 52
3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置 53
4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示 54
5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度 55
使用方法： 56
1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件 57
2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件 58
3、属性说明： 59
speed 滚动速度，必须 60
scroll_text 滚动文本内容class，必须 61
sWidth 滚动条宽度，必须 62
updownH 上下微调按钮高度，必须 63
scrollbar 文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true 64
text_width 滚动文本宽度，可选 65
二、Jquery
1 $.fn.extend({
2 generateUUID: function () {
3 //唯一ID数值生成
4 var d = new Date().getTime();
5 var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
6 var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
7 }); return uuid;
8 },
9
10 LeonaScroll: function (parameter) {
11 var Sname = $(this).selector;
12 return this.each(function () {
13 //变量声明
14 var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width();
15
16 //添加滚动条Html
17 var scrollHTML = "";
18 scrollHTML += "";
19 scrollHTML += "";
20 scrollHTML += "";
21 $(elem).append(" " + scrollHTML + "");
22
23 //添加滚动条CSS
24 var scrollStyle = "";
25 scrollStyle += "body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }";
26 scrollStyle += Sname + "{ position: relative; overflow-y: hidden; clear:none ; }";
27 scrollStyle += parameter.scroll_text + "{width:" + (parameter.text_width === undefined ? (con_width - parameter.sWidth) : parameter.text_width) + "px; word-break: break-word; position: absolute; left: 0; top: 0; clear:both; }";
28 scrollStyle += ".scroll { height:" + text_hidden + "px; float:right; }";
29 scrollStyle += ".scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width:" + parameter.sWidth + "px; }";
30 scrollStyle += ".scroll .scroll_up, .scroll .scroll_down {height:" + parameter.updownH + "px; line-height: " + parameter.updownH + "px; color: #ffffff; font-size: 12px; font-weight: bold; background-image:url(img/bw.png); background-color:#161515; background-repeat:no-repeat; cursor: pointer;}";
31 scrollStyle += ".scroll .scroll_up{background-position: 0px 6px; border-radius:5px 5px 0 0; }";
32 scrollStyle += ".scroll .scroll_down{ background-position:0px -49px; border-radius:0 0 5px 5px; }";
33 scrollStyle += ".scroll .scroll_up:hover{background-position:0px -11px ; }";
34 scrollStyle += ".scroll .scroll_down:hover{background-position:0px -31px ; }";
35 scrollStyle += ".scroll .scroll_cen { height:" + (text_hidden - parameter.updownH * 2) + "px; background-color: #777676; position: relative; }";
36 scrollStyle += ".scroll .scroll_cen .scroll_button { width:" + (parameter.sWidth - 2) + "px; margin: 0px 1px; background:url(img/tiao.jpg) repeat-y 0 0; border-radius: 5px; position: absolute; cursor: pointer; }";
37 $("head").append("");
38
39 //变量声明
40 var text_show = $(celem).height(), scroll_b = $(".leonabutton" + index + ""), text_p = text_hidden / text_show, bH_max = $(".leonas" + index + " .leonacen" + index + "").height(), bH = text_p * bH_max;
41 if (parameter.scrollbar == true || parameter.scrollbar === undefined) {
42 if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }
43 } else return;
44
45
46 //鼠标拖动div事件
47 var needMove = false, mouseY = 0;
48 scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });
49 $(document).mouseup(function (event) { needMove = false; });
50 $(document).mousemove(function (event) {
51 if (needMove) {
52 var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;
53 if (bH_Top <= 0) {
54 scroll_b.css("top", 0);
55 $(celem).css("top", 0);
56 return;
57 }
58 if (bH_Top >= bH_max - bH) {
59 scroll_b.css("top", bH_max - bH);
60 $(celem).css("top", text_hidden - text_show);
61 return;
62 }
63 scroll_b.css("top", bH_Top); $(celem).css("top", -textY);
64 }
65 return;
66 });
67
68 //定义上下滚动规则
69 function goGun(direction, timer) {
70 bH_Top = scroll_b.position().top;
71 var h = 0; h += parameter.speed; //调节滑动速度
72 if (direction == 1) { //up
73 var Toping = bH_Top - h;
74 if (bH_Top <= 0 || Toping <= 0) {
75 scroll_b.css("top", 0); $(celem).css("top", 0);
76 if (timer == 2) clearInterval(goThread); //need timer
77 return;
78 }
79 scroll_b.css("top", bH_Top - h);
80 };
81 if (direction == -1) { //down
82 var Downing = bH_Top + h;
83 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {
84 scroll_b.css("top", bH_max - bH);
85 $(celem).css("top", text_hidden - text_show);
86 if (timer == 2) clearInterval(goThread); //need timer
87 return;
88 }
89 scroll_b.css("top", bH_Top + h);
90 }
91 var textY = bH_Top / bH_max * text_show;
92 $(celem).css("top", -textY);
93 };
94
95 //上下微调按钮事件
96 function minTiao(minTB, d, t) {
97 var goThread = "";
98 minTB.mouseup(function () { clearInterval(goThread); });
99 minTB.mousedown(function () {
100 clearInterval(goThread);
101 goThread = setInterval(function () { goGun(d, t); }, 300);
102 });
103 minTB.click(function () { goGun(d); });
104 };
105 minTiao($(".leonaup" + index + ""), 1, 2);//up
106 minTiao($(".leonadown" + index + ""), -1, 2);//down
107
108 //滚轮事件
109 if (text_p < 1) {
110 $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {
111 if (delta == 1) {//up
112 goGun(1, 0);
113 if (scroll_b.position().top != 0)
114 return false;
115 } if (delta == -1) {//down
116 goGun(-1, 0);
117 if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
118 return false;
119 }
120 });
121 }
122
123 });
124 }
125 });