首页 > 代码库 > JavaScript学习笔记- 自定义滚动条插件
JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向（Y轴）
一、Css
1 /*这里是让用户鼠标在里面不能选中文字，避免拖动的时候出错*/ 2 body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } 3 4 /*滚动文本及滚动条大框*/ 5 .scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y: hidden; } 6 7 /*滚动文本*/ 8 .scroll_text { width: 480px; font-size: 14px; word-break: break-word; color: #ffffff; position: absolute; left: 0; top: 0; } 9 10 /*滚动条整体框*/11 .scroll { height: 500px; background-color: #2e03c4; position: absolute; left: 486px; top: 0; }12 .scroll，.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width: 14px; }13 /*滚轮上下按钮*/14 .scroll .scroll_up, .scroll .scroll_down { height: 20px; line-height: 20px; background-color: #7263f8; color: #ffffff; font-size: 14px; font-weight: bold; text-align: center; }15 .scroll .scroll_up:hover, .scroll .scroll_down:hover { background-color: #9da2f8; cursor: pointer; }16 /*滚动滚动轨道*/17 .scroll .scroll_cen { height: 460px; background-color: #2e03c4; position: relative; }18 .scroll .scroll_cen .scroll_button { width: 12px; margin: 0px 1px; background-color: #7263f8; border-radius: 5px; position: absolute; cursor: pointer; }
二、Html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="/jquery-1.10.2.js"></script> 8 <script src="/mousewheel.js"></script> 9 <script src="/scroll.js"></script>10 </head>11 12 <body>13 <div class="scroll_con">14 <div class="scroll_text">15 你需要放在滚动条可滑动区域的文本16 </div>17 </div>18 19 <script type="text/javascript">20 //滚动条方法调用，括号里的数字为滑动速度21 $(".scroll_con").LeonaScroll(50);22 </script>23 24 </body>25 </html>
三、Js
1 $.fn.extend({ 2 LeonaScroll: function (speed) { 3 return this.each(function () { 4 var elem = $(this); 5 var celem = $(this).find(".scroll_text"); 6 var index = $(this).index(); 7 //添加滚动条 8 scrollHTML = ""; 9 scrollHTML += "<div class=‘scroll_up leonaup" + index + "‘>∧</div>";10 scrollHTML += "<div class=‘scroll_cen leonacen" + index + "‘><div class=‘scroll_button leonabutton" + index + "‘></div></div>";11 scrollHTML += "<div class=‘scroll_down leonadown" + index + "‘>∨</div>";12 $(elem).append("<div class=‘scroll leonas" + index + "‘> " + scrollHTML + "</div>");13 14 var text_hidden = $(elem).height(),15 text_show = $(celem).height(),16 scroll_b = $(".leonabutton" + index + ""),17 text_p = text_hidden / text_show,18 bH_max = $(".leonas" + index + " .leonacen" + index + "").height(),19 bH = text_p * bH_max;20 if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }21 22 //鼠标拖动div事件23 var needMove = false, mouseY = 0;24 scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });25 $(document).mouseup(function (event) { needMove = false; });26 $(document).mousemove(function (event) {27 if (needMove) {28 var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;29 if (bH_Top <= 0) {30 scroll_b.css("top", 0);31 $(celem).css("top", 0);32 return;33 }34 if (bH_Top >= bH_max - bH) {35 scroll_b.css("top", bH_max - bH);36 $(celem).css("top", text_hidden - text_show);37 return;38 }39 scroll_b.css("top", bH_Top); $(celem).css("top", -textY);40 }41 return;42 });43 44 function goGun(direction, timer) {45 bH_Top = scroll_b.position().top;46 var h = 0; h += speed; //调节滑动速度47 if (direction == 1) { //up48 var Toping = bH_Top - h;49 if (bH_Top <= 0 || Toping <= 0) {50 scroll_b.css("top", 0);51 $(celem).css("top", 0);52 if (timer == 2) clearInterval(goThread); //need timer53 return;54 }55 scroll_b.css("top", bH_Top - h);56 }57 if (direction == -1) { //down58 var Downing = bH_Top + h;59 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {60 scroll_b.css("top", bH_max - bH);61 $(celem).css("top", text_hidden - text_show);62 if (timer == 2) clearInterval(goThread); //need timer63 return;64 }65 scroll_b.css("top", bH_Top + h);66 }67 var textY = bH_Top / bH_max * text_show;68 $(celem).css("top", -textY);69 }70 71 //上下微调按钮事件72 function minTiao(minTB, d, t) {73 var goThread = "";74 minTB.mouseup(function () { clearInterval(goThread); });75 minTB.mousedown(function () {76 clearInterval(goThread);77 goThread = setInterval(function () { goGun(d, t); }, 300);78 });79 minTB.click(function () { goGun(d); });80 }81 minTiao($(".leonaup" + index + ""), 1, 2);82 minTiao($(".leonadown" + index + ""), -1, 2);83 84 //滚轮事件85 $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {86 if (delta == 1) {87 goGun(1, 0);88 if (scroll_b.position().top != 0)89 return false;90 } if (delta == -1) {91 goGun(-1, 0);92 if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))93 return false;94 }95 });96 });97 }98 });
四、插件下载链接：http://share.weiyun.com/143696ddb7e1f11ad47b7782ed629cbb （密码：vrml）【内含压缩的js】
JavaScript学习笔记- 自定义滚动条插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。