将自己定义的滚动条的JS代码封装成了scroll.js下面是scroll.js代码
//drag //首先，在鼠标移动进来时要显示该scrolle $('.scrollbar').hover(function(){ $('.scroll').show(); }); $('.scroller').on('mousedown',function(e){ //鼠标按下时，记录鼠标的top值 var $this = $(this); var ctop = $this.position().top; //currentop var y = e.clientY; //获取scroll向下滚动的最大距离 var maxHeight = $this.parent('.scroll').height() - $this.height(); //获取文本被隐藏内容的高度 var theight = $('.scrollbar').find('.contenbox').outerHeight(); var cheight = $this.parent('.scroll').height(); var sheight = theight - cheight; $(document).on('mousemove',function(e){ var ntop = e.clientY - y + ctop; if(ntop < 0) ntop = 0; if(ntop > maxHeight) ntop = maxHeight; var percent = ntop/maxHeight; $this.css({ top:ntop }) $('.contenbox').css({ marginTop : -percent*sheight }) }).on('mouseup',function(){ $(document).off(); }) }); //定义输入框的宽度和高度函数 function chParaText(a,b){ var cwidth = a; var cheight = b; $('.scrollbar').css({ width : cwidth, height : cheight }) }； //定义滚动条的宽度和颜色函数 function chColor(col,width){ var col = col; var cwidth = width; $('.scroll').css({ width : cwidth, }) $('.scroller').css({ width : cwidth, backgroundColor : col }) }；
下面是主界面，引入JQ文件和scroll.js文件即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ padding: 100px; -moz-user-select: none; } .scrollbar{ width: 300px; height: 200px; border: 1px solid #ccc; position: absolute; overflow: hidden; } .scroll{ width: 7px; height: 100%; background-color: #ccc; position: relative; float: right; display: none; border-radius: 4px; } .contenbox{ padding: 8px; } .scroller{ width: 100%; height: 10px; background-color: #330000; position: absolute; cursor: pointer; border-radius: 4px; } </style> </head> <body> <div class="scrollbar"> <div class="scroll"> <div class="scroller"></div> </div> <div class="contenbox"> jQuery滚动条插件-jQuery custom content scroller www.jq22.com/jquery-in... - 百度快照 - 4 jQuery滚动条插件jQuery custom content scroller支持横向滚动纵向滚动以及多种滚动显示效果。使用这个插件你可以轻松的给你的层追加很好看的滚动条。 Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat jq22.com/jquery-in... - 百度快照 - 4 jQuery滚动条插件jQuery custom content scroller支持横向滚动纵向滚动以及多种滚动显示效果。使用这个插件你可以轻松的给你的层追加很好看的滚动条。 Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Consectetur adipiscing elit. N jq22.com/jquery-in... - 百度快照 - 4 jQuery滚动条插件jQuery custom content scroller支持横向滚动纵向滚动以及多种滚动显示效果。使用这个插件你可以轻松的给你的层追加很好看的滚动条。 Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Consectetur adipiscing elit. N jq22.com/jquery-in... - 百度快照 - 4 jQuery滚动条插件jQuery custom content scroller支持横向滚动纵向滚动以及多种滚动显示效果。使用这个插件你可以轻松的给你的层追加很好看的滚动条。 Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potent </div> </div> </body> <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/scroll.js"> </script> <script type="text/javascript"> chParaText(400,400); chColor('red',10); </script> </html>
在用到该插件代码处，直接引入和调用scroll.js中定义的两个函数即chParaText(),chColor()来修改插件的默认参数来适应不同需求即可。
插件需要改进的地方：
1.点击文本处可以进入文本编辑模式
2.尝试把插件的CSS代码也融入到scroll.js文件中去
3.满足在编辑框下面加一组编辑按钮，即可以改变文本的字体大小，颜色，加粗等格式变化的需求。
4.一些小的细节方面的处理。