1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂
2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由
3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置
4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示
5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度
使用方法：
1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件
2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
3、属性说明：
speed 滚动速度，必须
scroll_text 滚动文本内容class，必须
sWidth 滚动条宽度，必须
updownH 上下微调按钮高度，必须
scrollbar 文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true
text_width 滚动文本宽度，可选
leonaScroll-1.0仅供学习参考使用，该版本为本人学习时思路版，尚有不足，新版本修复了很多问题，但仍然存在着二次调用问题。不过已经有了解决方案，只是本人比较赖，没有修复，等待1.2版本修复吧！哈哈！
当然如果有人使用后遇到bug或者不方便的地方，欢迎提出，以便本人继续改进。
学习之余写的小插件，如有什么不足之处，还望见谅。
最后感谢在本插件开发过程中，帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑！
废话不说了，附js代码和下载地址
一、Html+Css
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="https://www.jb51.net/js/jquery-1.10.2.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/mousewheel.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/leonaScroll-min-1.1.js" type="text/javascript"></script> <style type="text/css"> .left,.Explain,.center,.welcome,.right,.usage{ height:300px;} .left,.Explain,.Explain_text{ width:200px;} .right,.usage,.usage_text{ width:700px;} .center,.welcome,.welcome_text{ width:300px;} .left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;} .Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; } </style> </head> <body> <div> <div> <div> leonaScroll-1.1.js <br />介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义滚动条 <br /><span>(未超出可显示文本区域时，要求显示滚动条)</span> </div> </div> </div> <div> <div> <div> leonaScroll-1.1.js <br />欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！ <br />作者：leona <br />发布时间：2016-6-16 <br />博客：<a href="https://www.cnblogs.com/leona-d/"></a> <br /><span>(未超出可显示文本区域时，默认不显示滚动条)</span> </div> </div> </div> <div> <div> <div> leonaScroll-1.1.js <br />欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！ <br />更新：1.1版本 <br />1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂 <br />2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由 <br />3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置 <br />4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示 <br />5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度 <br />使用方法： <br />1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件 <br />2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件 <br />3、属性说明： <br /> speed 滚动速度，必须 <br /> scroll_text 滚动文本内容class，必须 <br /> sWidth 滚动条宽度，必须 <br /> updownH 上下微调按钮高度，必须 <br /> scrollbar 文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true <br /> text_width 滚动文本宽度，可选 </div> </div> </div> <script type="text/javascript"> //滚动条调用方法 $(".Explain").LeonaScroll({ speed: 20, scroll_text: ".Explain_text", sWidth: 14, updownH: 20, scrollbar: false}); $(".welcome").LeonaScroll({ speed: 20, scroll_text: ".welcome_text", sWidth: 14, updownH: 20 }); $(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 }); </script> </body> </html>
二、Jquery