JavaScript-JQ初探实现自定义滚动条
这是一个基本实现思路，如果有新手和我一样没什么事，喜欢瞎研究话，可以参考下。
一、Html
1 <div class="scroll_con"> 2 <div class="scroll_text"> 3 这里是你的需要显示在滚动条框内文本内容...... 4 </div> 5 </div>
二、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 * { margin: 0; padding: 0; border: 0; } 5 6 /*滚动文本及滚动条大框*/ 7 .scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y: hidden; } 8 9 /*滚动文本*/ 10 .scroll_text { width: 480px; font-size: 14px; word-break:break-word; color: #ffffff; position: absolute; left: 0; top: 0; } 11 12 /*滚动条整体框*/ 13 .scroll { height: 500px; background-color: #2e03c4; position: absolute; left: 486px; top: 0; } 14 .scroll，.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width: 14px; } 15 /*滚轮上下按钮*/ 16 .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; } 17 .scroll .scroll_up:hover, .scroll .scroll_down:hover { background-color: #9da2f8; cursor: pointer; } 18 /*滚动滚动轨道*/ 19 .scroll .scroll_cen { height: 460px; background-color: #2e03c4; position: relative; } 20 .scroll .scroll_cen .scroll_button { width: 12px; margin: 0px 1px; background-color: #7263f8; border-radius: 5px; position: absolute; cursor: pointer; }
三、JavaScript
1 $(function () { 2 3 //添加滚动条 4 scrollHTML = ""; 5 scrollHTML += "<div class='scroll_up'>∧</div>"; //上微调按钮 6 scrollHTML += "<div class='scroll_cen'><div class='scroll_button'></div></div>"; //中间轨道层即内滑动按钮 7 scrollHTML += "<div class='scroll_down'>∨</div>"; //下微调按钮 8 $(".scroll_con").append("<div class='scroll'> " + scrollHTML + "</div>"); //在HTML中输出滚动条整体 9 10 11 var text_hidden = $(".scroll_con").height(); //文本内容显示高度 12 var text_show = $(".scroll_text").height(); //文本内容实际高度 13 var scroll_b = $(".scroll_button"); //获取滚动按钮 14 var text_p = text_hidden / text_show; //计算显示内容占实际内容的多少 15 var bH_max = 460; //定义滚动按钮最大显示长度 16 var bH = text_p * bH_max; //定义滚动按钮长度随文本实际内容成正比改变 17 if (text_p >= 1) { //判断当文本没有超出显示框时 18 $(".scroll").css("display", "none"); //滚动条不显示 19 } else { //否则 20 $(".scroll").css("display", "block"); //显示滚动条 21 scroll_b.css("height", bH + "px"); //且按钮长度为随正比改变的值 22 } 23 24 //鼠标拖动div事件 25 var needMove = false, //是否需要拖动 26 mouseY = 0; //清空当前鼠标指针坐标 27 28 scroll_b.mousedown(function (event) { //当鼠标按下时 29 needMove = true; //需要滑动 30 var bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top 31 mouseY = event.pageY - bH_Top; //计算此时的鼠标指针坐标 32 }); 33 34 $(document).mouseup(function (event) { //当鼠标离开时 35 needMove = false; //不需要滑动 36 }); 37 38 $(document).mousemove(function (event) { //当鼠标移动时 39 if (needMove) {//如果为需要滑动 40 var sMouseY = event.pageY; //获取鼠标移动后在页面的当前坐标 41 var bH_Top = sMouseY - mouseY; //计算滚动按钮此时的top 42 var textY = bH_Top / bH_max * text_show; //根据前面计算出的占比计算文本此时应该显示的坐标 43 44 if (bH_Top <= 0) { //如果此时滚动按钮的top<0 45 scroll_b.css("top", 0); 46 $(".scroll_text").css("top", 0); 47 return; 48 } 49 50 if (bH_Top >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围 51 scroll_b.css("top", bH_max - bH); 52 $(".scroll_text").css("top", text_hidden - text_show); 53 return; 54 } 55 scroll_b.css("top", bH_Top); 56 $(".scroll_text").css("top", -textY); 57 } 58 return; 59 }); 60 61 62 //上微调按钮点击事件 63 var goThread = ""; 64 65 $(".scroll_up").mouseup(function () { 66 clearInterval(goThread); 67 }) 68 69 $(".scroll_up").mousedown(function () { 70 clearInterval(goThread); 71 goThread = setInterval(function () { 72 73 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top 74 var h = 0; 75 h += 5; 76 var Toping = bH_Top - h; 77 if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0 78 scroll_b.css("top", 0); 79 $(".scroll_text").css("top", 0); 80 return; 81 } 82 var textY = bH_Top / bH_max * text_show; 83 scroll_b.css("top", bH_Top - h); 84 $(".scroll_text").css("top", -textY); 85 86 }, 300); 87 }); 88 89 $(".scroll_up").click(function () { 90 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top 91 var h = 0; 92 h += 5; 93 var Toping = bH_Top - h; 94 if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0 95 scroll_b.css("top", 0); 96 $(".scroll_text").css("top", 0); 97 return; 98 } 99 var textY = bH_Top / bH_max * text_show; 100 scroll_b.css("top", bH_Top - h); 101 $(".scroll_text").css("top", -textY); 102 }); 103 104 //下微调按钮点击事件 105 $(".scroll_down").mouseup(function () { 106 clearInterval(goThread); 107 }) 108 109 $(".scroll_down").mousedown(function () { 110 clearInterval(goThread); 111 goThread = setInterval(function () { 112 113 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top 114 var h = 0; 115 h += 5; 116 var Downing = bH_Top + h; 117 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围 118 scroll_b.css("top", bH_max - bH); 119 $(".scroll_text").css("top", text_hidden - text_show); 120 return; 121 } 122 var textY = bH_Top / bH_max * text_show; 123 scroll_b.css("top", bH_Top + h); 124 $(".scroll_text").css("top", -textY); 125 126 }, 300); 127 }); 128 129 $(".scroll_down").click(function () { 130 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top 131 var h = 0; 132 h += 5; 133 var Downing = bH_Top + h; 134 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围 135 scroll_b.css("top", bH_max - bH); 136 $(".scroll_text").css("top", text_hidden - text_show); 137 return; 138 } 139 var textY = bH_Top / bH_max * text_show; 140 scroll_b.css("top", bH_Top + h); 141 $(".scroll_text").css("top", -textY); 142 }); 143 144 145 //滚轮事件（这里调用了一个插件jQuery Mousewheel） 146 $(".scroll_con").bind("mousewheel", function (event, delta, deltaX, deltaY) { 147 if (delta==1) { //滚动向上滚动时 148 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top 149 var h = 0; 150 h += 5; 151 var Toping = bH_Top - h; 152 if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0 153 scroll_b.css("top", 0); 154 $(".scroll_text").css("top", 0); 155 return; 156 } 157 var textY = bH_Top / bH_max * text_show; 158 scroll_b.css("top", bH_Top - h); 159 $(".scroll_text").css("top", -textY); 160 } 161 if (delta == -1) { //滚动向下滚动时 162 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top 163 var h = 0; 164 h += 5; 165 var Downing = bH_Top + h; 166 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围 167 scroll_b.css("top", bH_max - bH); 168 $(".scroll_text").css("top", text_hidden - text_show); 169 return; 170 } 171 var textY = bH_Top / bH_max * text_show; 172 scroll_b.css("top", bH_Top + h); 173 $(".scroll_text").css("top", -textY); 174 } 175 return; 176 177 }); 178 179 })
四、OK，这样就搞定一个自定义的滚动条了，最后总结下，将复用的方法整合，优化下代码。封装成一个方法就完成啦！
