JavaScript学习笔记-自定义滚动条

这是一个基本实现思路，如果有新手和我一样没什么事，喜欢瞎研究话，可以参考下。

一、Html

  <div class="scroll_con">
         <div class="scroll_text">
             这里是你的需要显示在滚动条框内文本内容......
         </div>
     </div>

二、Css

  /*这里是让用户鼠标在里面不能选中文字，避免拖动的时候出错*/
         body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }

         * { margin:; padding:; border:; }

         /*滚动文本及滚动条大框*/
         .scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y: hidden; }

         /*滚动文本*/
         .scroll_text { width: 480px; font-size: 14px; word-break:break-word; color: #ffffff; position: absolute; left:; top:; }

         /*滚动条整体框*/
         .scroll { height: 500px; background-color: #2e03c4; position: absolute; left: 486px; top:; }
         .scroll，.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width: 14px; }
         /*滚轮上下按钮*/
         .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; }
         .scroll .scroll_up:hover, .scroll .scroll_down:hover { background-color: #9da2f8; cursor: pointer; }
         /*滚动滚动轨道*/
         .scroll .scroll_cen { height: 460px; background-color: #2e03c4; position: relative; }
         .scroll .scroll_cen .scroll_button { width: 12px; margin: 0px 1px; background-color: #7263f8; border-radius: 5px; position: absolute; cursor: pointer; }

三、JavaScript

  $(function () {

             //添加滚动条
             scrollHTML = "";
             scrollHTML += "<div class='scroll_up'>∧</div>";   //上微调按钮
             scrollHTML += "<div class='scroll_cen'><div class='scroll_button'></div></div>";   //中间轨道层即内滑动按钮
             scrollHTML += "<div class='scroll_down'>∨</div>";  //下微调按钮
             $(".scroll_con").append("<div class='scroll'> " + scrollHTML + "</div>");  //在HTML中输出滚动条整体

             var text_hidden = $(".scroll_con").height(); //文本内容显示高度
             var text_show = $(".scroll_text").height(); //文本内容实际高度
             var scroll_b = $(".scroll_button"); //获取滚动按钮
             var text_p = text_hidden / text_show; //计算显示内容占实际内容的多少
             var bH_max = 460; //定义滚动按钮最大显示长度
             var bH = text_p * bH_max;  //定义滚动按钮长度随文本实际内容成正比改变
             if (text_p >= 1) { //判断当文本没有超出显示框时
                 $(".scroll").css("display", "none");  //滚动条不显示
             } else { //否则
                 $(".scroll").css("display", "block"); //显示滚动条
                 scroll_b.css("height", bH + "px"); //且按钮长度为随正比改变的值
             }

             //鼠标拖动div事件
             var needMove = false,  //是否需要拖动
                 mouseY = 0;  //清空当前鼠标指针坐标

             scroll_b.mousedown(function (event) { //当鼠标按下时
                 needMove = true; //需要滑动
                 var bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
                 mouseY = event.pageY - bH_Top; //计算此时的鼠标指针坐标
             });

             $(document).mouseup(function (event) { //当鼠标离开时
                 needMove = false; //不需要滑动
             });

             $(document).mousemove(function (event) { //当鼠标移动时
                 if (needMove) {//如果为需要滑动
                     var sMouseY = event.pageY;  //获取鼠标移动后在页面的当前坐标
                     var bH_Top = sMouseY - mouseY;  //计算滚动按钮此时的top
                     var textY = bH_Top / bH_max * text_show;  //根据前面计算出的占比计算文本此时应该显示的坐标

                     if (bH_Top <= 0) { //如果此时滚动按钮的top<0
                         scroll_b.css("top", 0);
                         $(".scroll_text").css("top", 0);
                         return;
                     }

                     if (bH_Top >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
                         scroll_b.css("top", bH_max - bH);
                         $(".scroll_text").css("top", text_hidden - text_show);
                         return;
                     }
                     scroll_b.css("top", bH_Top);
                     $(".scroll_text").css("top", -textY);
                 }
                 return;
             });

             //上微调按钮点击事件
             var goThread = "";

             $(".scroll_up").mouseup(function () {
                 clearInterval(goThread);
             })

             $(".scroll_up").mousedown(function () {
                 clearInterval(goThread);
                 goThread = setInterval(function () {

                     bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
                     var h = 0;
                     h += 5;
                     var Toping = bH_Top - h;
                     if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0
                         scroll_b.css("top", 0);
                         $(".scroll_text").css("top", 0);
                         return;
                     }
                     var textY = bH_Top / bH_max * text_show;
                     scroll_b.css("top", bH_Top - h);
                     $(".scroll_text").css("top", -textY);

                 }, 300);
             });

             $(".scroll_up").click(function () {
                 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
                 var h = 0;
                 h += 5;
                 var Toping = bH_Top - h;
                 if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0
                     scroll_b.css("top", 0);
                     $(".scroll_text").css("top", 0);
                     return;
                 }
                 var textY = bH_Top / bH_max * text_show;
                 scroll_b.css("top", bH_Top - h);
                 $(".scroll_text").css("top", -textY);
             });

             //下微调按钮点击事件
             $(".scroll_down").mouseup(function () {
                 clearInterval(goThread);
             })

             $(".scroll_down").mousedown(function () {
                 clearInterval(goThread);
                 goThread = setInterval(function () {

                     bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
                     var h = 0;
                     h += 5;
                     var Downing = bH_Top + h;
                     if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
                         scroll_b.css("top", bH_max - bH);
                         $(".scroll_text").css("top", text_hidden - text_show);
                         return;
                     }
                     var textY = bH_Top / bH_max * text_show;
                     scroll_b.css("top", bH_Top + h);
                     $(".scroll_text").css("top", -textY);

                 }, 300);
             });

             $(".scroll_down").click(function () {
                 bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
                 var h = 0;
                 h += 5;
                 var Downing = bH_Top + h;
                 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
                     scroll_b.css("top", bH_max - bH);
                     $(".scroll_text").css("top", text_hidden - text_show);
                     return;
                 }
                 var textY = bH_Top / bH_max * text_show;
                 scroll_b.css("top", bH_Top + h);
                 $(".scroll_text").css("top", -textY);
             });

             //滚轮事件（这里调用了一个插件jQuery Mousewheel）
             $(".scroll_con").bind("mousewheel", function (event, delta, deltaX, deltaY) {
                 if (delta==1) { //滚动向上滚动时
                     bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
                     var h = 0;
                     h += 5;
                     var Toping = bH_Top - h;
                     if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0
                         scroll_b.css("top", 0);
                         $(".scroll_text").css("top", 0);
                         return;
                     }
                     var textY = bH_Top / bH_max * text_show;
                     scroll_b.css("top", bH_Top - h);
                     $(".scroll_text").css("top", -textY);
                 }
                 if (delta == -1) { //滚动向下滚动时
                     bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
                     var h = 0;
                     h += 5;
                     var Downing = bH_Top + h;
                     if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
                         scroll_b.css("top", bH_max - bH);
                         $(".scroll_text").css("top", text_hidden - text_show);
                         return;
                     }
                     var textY = bH_Top / bH_max * text_show;
                     scroll_b.css("top", bH_Top + h);
                     $(".scroll_text").css("top", -textY);
                 }
                 return;

             });

         })

四、OK，这样就搞定一个自定义的滚动条了，最后总结下，将复用的方法整合，优化下代码。封装成一个方法就完成啦！