jQuery leonaScroll 1.1 自定义滚动条插件(推荐)

时间：2021-05-26

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

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script src="js/jquery-1.10.2.js" type="text/javascript"></script><script src="js/mousewheel.js" type="text/javascript"></script><script src="js/leonaScroll-min-1.1.js" type="text/javascript"></script><style type="text/css">.left,.Explain,.center,.welcome,.right,.usage{ height:300px;}.left,.Explain,.Explain_text{ width:200px;}.right,.usage,.usage_text{ width:700px;}.center,.welcome,.welcome_text{ width:300px;}.left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;}.Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; }</style></head><body><div class="left"><div class="Explain sss"><div class="Explain_text">leonaScroll-1.1.js<br />介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义滚动条<br /><span style="color:red">(未超出可显示文本区域时，要求显示滚动条)</span></div></div></div><div class="center"><div class="welcome"><div class="welcome_text">leonaScroll-1.1.js<br />欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！<br />作者：leona<br />发布时间：2016-6-16<br />博客：<a href="http://e_text", sWidth: 14, updownH: 20 });$(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 });</script></body></html>

二、Jquery

$.fn.extend({generateUUID: function () {//唯一ID数值生成var d = new Date().getTime();var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);}); return uuid;},LeonaScroll: function (parameter) {var Sname = $(this).selector;return this.each(function () {//变量声明var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width();//添加滚动条Htmlvar scrollHTML = "";scrollHTML += "<div class='scroll_up leonaup" + index + "'></div>";scrollHTML += "<div class='scroll_cen leonacen" + index + "'><div class='scroll_button leonabutton" + index + "'></div></div>";scrollHTML += "<div class='scroll_down leonadown" + index + "'></div>";$(elem).append("<div class='scroll leonas" + index + "'> " + scrollHTML + "</div>");//添加滚动条CSSvar scrollStyle = "";scrollStyle += "body { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; }";scrollStyle += Sname + "{ position: relative; overflow-y: hidden; clear:none }";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; }";scrollStyle += ".scroll { height:" + text_hidden + "px; float:right; }\r\n";scrollStyle += ".scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width:" + parameter.sWidth + "px; }";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;}";scrollStyle += ".scroll .scroll_up{background-position: 0px 6px; border-radius:5px 5px 0 0; }";scrollStyle += ".scroll .scroll_down{ background-position:0px -49px; border-radius:0 0 5px 5px; }";scrollStyle += ".scroll .scroll_up:hover{background-position:0px -11px ; }";scrollStyle += ".scroll .scroll_down:hover{background-position:0px -31px ; }";scrollStyle += ".scroll .scroll_cen { height:" + (text_hidden - parameter.updownH * 2) + "px; background-color: #777676; position: relative; }";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; }";$("head").append("<style type='text/css'>" + scrollStyle + "</style>");//变量声明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;if (parameter.scrollbar == true || parameter.scrollbar === undefined) {if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }} else return;//鼠标拖动div事件var needMove = false, mouseY = 0;scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });$(document).mouseup(function (event) { needMove = false; });$(document).mousemove(function (event) {if (needMove) {var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;if (bH_Top <= 0) scroll_b.css("top", 0); $(celem).css("top", 0); return;if (bH_Top >= bH_max - bH) scroll_b.css("top", bH_max - bH); $(celem).css("top", text_hidden - text_show); return;scroll_b.css("top", bH_Top); $(celem).css("top", -textY);} return;});//定义上下滚动规则function goGun(direction, timer) {bH_Top = scroll_b.position().top;var h = 0; h += parameter.speed; //调节滑动速度if (direction == 1) { //upvar Toping = bH_Top - h;if (bH_Top <= 0 || Toping <= 0) {scroll_b.css("top", 0); $(celem).css("top", 0);if (timer == 2) clearInterval(goThread); //need timerreturn;}scroll_b.css("top", bH_Top - h);};if (direction == -1) { //downvar Downing = bH_Top + h;if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {scroll_b.css("top", bH_max - bH);$(celem).css("top", text_hidden - text_show);if (timer == 2) clearInterval(goThread); //need timerreturn;}scroll_b.css("top", bH_Top + h);}var textY = bH_Top / bH_max * text_show;$(celem).css("top", -textY);};//上下微调按钮事件function minTiao(minTB, d, t) {var goThread = "";minTB.mouseup(function () { clearInterval(goThread); });minTB.mousedown(function () {clearInterval(goThread);goThread = setInterval(function () { goGun(d, t); }, 300);});minTB.click(function () { goGun(d); });};minTiao($(".leonaup" + index + ""), 1, 2);//upminTiao($(".leonadown" + index + ""), -1, 2);//down//滚轮事件if (text_p < 1) {$(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {if (delta == 1) {//upgoGun(1, 0);if (scroll_b.position().top != 0)return false;} if (delta == -1) {//downgoGun(-1, 0);if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))return false;}});}});}});

以上所述是小编给大家介绍的jQuery leonaScroll 1.1 自定义滚动条插件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章