JavaScript学习笔记- 自定义滚动条插件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript学习笔记- 自定义滚动条插件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5402字，纯文字阅读大概需要8分钟。
内容图文
此滚动条仅支持竖向（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; }
910/*滚动条整体框*/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) {
3returnthis.each(function () {
4var elem = $(this);
5var celem = $(this).find(".scroll_text");
6var 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>");
1314var 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;
20if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }
2122//鼠标拖动div事件23var 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) {
27if (needMove) {
28var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;
29if (bH_Top <= 0) {
30 scroll_b.css("top", 0);
31 $(celem).css("top", 0);
32return;
33 }
34if (bH_Top >= bH_max - bH) {
35 scroll_b.css("top", bH_max - bH);
36 $(celem).css("top", text_hidden - text_show);
37return;
38 }
39 scroll_b.css("top", bH_Top); $(celem).css("top", -textY);
40 }
41return;
42 });
4344function goGun(direction, timer) {
45 bH_Top = scroll_b.position().top;
46var h = 0; h += speed; //调节滑动速度47if (direction == 1) { //up48var Toping = bH_Top - h;
49if (bH_Top <= 0 || Toping <= 0) {
50 scroll_b.css("top", 0);
51 $(celem).css("top", 0);
52if (timer == 2) clearInterval(goThread); //need timer53return;
54 }
55 scroll_b.css("top", bH_Top - h);
56 }
57if (direction == -1) { //down58var Downing = bH_Top + h;
59if (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);
62if (timer == 2) clearInterval(goThread); //need timer63return;
64 }
65 scroll_b.css("top", bH_Top + h);
66 }
67var textY = bH_Top / bH_max * text_show;
68 $(celem).css("top", -textY);
69 }
7071//上下微调按钮事件72function minTiao(minTB, d, t) {
73var 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);
8384//滚轮事件85 $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {
86if (delta == 1) {
87 goGun(1, 0);
88if (scroll_b.position().top != 0)
89returnfalse;
90 } if (delta == -1) {
91 goGun(-1, 0);
92if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
93returnfalse;
94 }
95 });
96 });
97 }
98 });
四、插件下载链接：http://share.weiyun.com/143696ddb7e1f11ad47b7782ed629cbb （密码：vrml）【内含压缩的js】
原文：http://www.cnblogs.com/leona-d/p/5867615.html
内容总结
以上是互联网集市为您收集整理的JavaScript学习笔记- 自定义滚动条插件全部内容，希望文章能够帮你解决JavaScript学习笔记- 自定义滚动条插件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】