abScrollBar基于jquery运行的滚动条特效插件。体积小使用简单的滚动条小插件，通过鼠标滑动页面内的滚动条，或鼠标拖动滚动条查看滚动框里的内容。可自定义滚动条样式，可选横或竖呈现，默认可选显示或隐藏滚动条。兼容IE6+SafariOperaFirefoxChrome等大部分浏览器。
版本更新：
- v1.2新增横向滚动条显示方式。参数scrollTypex=水平方向滑动,y=垂直方向滑动。 2022年10月19日
- abScrollBarv1.2版本发布2022年10月17日
使用方法
<scripttype="text/javascript"src="js/jquery.min.js"></script><!--必须存在1--><scripttype="text/javascript"src="js/jquery.abScrollBar-v1.2.min.js"></script><!--必须存在2-->HTML结构
<divclass="abScrollBar-main"><divclass="abScrollBar-box"><divclass="content"><!--此为滚动条必须的内容父层，添加调用时需要用到此处的class名--><p>你的滚动条框架层里的内容</p><!--此处添加你的滚动框架里内容，此演示为P标签，样式自行添加修改。--></div></div></div>CSS样式
<styletype="text/css">*{margin:0;padding:0;}body{background:#0c91e8;font-size:12px;color:#183b52;}ul,li{list-style:none;}p{word-wrap:break-word;}img{border:0;vertical-align:middle;}a{color:#eef7fe;text-decoration:none;}a:hover{color:#fff;text-decoration:none;}.abScrollBar-main{width:320px;height:465px;margin:0auto;background:#fff;border:1pxsolid#fff;border-radius:30px;}.abScrollBar-box{width:320px;height:400px;margin:30px000;background:#fff;overflow:hidden;position:relative;}/*.abScrollBar-box.content为内容父层，添加调用时需要用到此处的class名*/.abScrollBar-box.content{color:#555;padding:0px30px;}.abScrollBar-box.contentp{line-height:24px;font-size:14px;padding:15px0;text-indent:2em;border-bottom:1pxsolid#f5f5f5;}/*自定义的滚动条样式*/.abScrollBar-box.bar{background:#fafafa;}.abScrollBar-box.barem{background:#4ad585;}</style>JS调用代码
<scripttype="text/javascript">$(document).ready(function(){abScrollBar({scrollType:"y",/*默认=y,x=水平方向滑动,y=垂直方向滑动*/contentEl:".content",/*滚动条内容层*/barClass:"bar",/*自定义的滚动条样式*/barBgClass:"bar-bg",/*滚动条背景样式*/width:320,/*滚动内容宽度，此例子宽度等于abScrollBar-box层的宽度*/height:400,/*滚动内容高度，此例子高度等于abScrollBar-box层的高度*/barWidth:10,/*默认6,滚动条宽度*/isHideBar:true,/*当鼠标离开容器区域，默认为false时显示滚动条，为true时隐藏滚动条*/mousewheelStep:30/*默认=30，鼠标轮滚步长*/});});</script>
评论