简介

abScrollBar 基于 jquery 运行的滚动条特效插件。 体积小使用简单的滚动条小插件，通过鼠标滑动页面内的滚动条，或鼠标拖动滚动条查看滚动框里的内容。可自定义滚动条样式，可选横或竖呈现，默认可选显示或隐藏滚动条。 兼容 IE6+ Safari Opera Firefox Chrome 等大部分浏览器。 

（下载的附件中附有完整DEMO）

使用

1.  引入文件

<script type="text/javascript" src="js/jquery.min.js"></script> <!-- 必须存在1 -->
<script type="text/javascript" src="js/jquery.abScrollBar-v1.2.min.js"></script> <!-- 必须存在2 -->

2.  HTML

<div class="abScrollBar-main">
   <div class="abScrollBar-box">
      <div class="content"> <!-- 此为滚动条必须的内容父层，添加调用时需要用到此处的class名 -->
        <p>你的滚动条框架层里的内容</p> <!-- 此处添加你的滚动框架里内容，此演示为P标签，样式自行添加修改。 -->
      </div>
   </div>
</div>

CSS
<style type="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:0 auto; background:#fff; border:1px solid #fff; border-radius:30px; }
    .abScrollBar-box { width:320px; height:400px; margin:30px 0 0 0; background:#fff; overflow: hidden; position: relative; }
    /* .abScrollBar-box .content为内容父层，添加调用时需要用到此处的class名 */
    .abScrollBar-box .content { color: #555; padding: 0px 30px; }
    .abScrollBar-box .content p { line-height: 24px; font-size:14px; padding:15px 0; text-indent:2em; border-bottom:1px solid #f5f5f5; }
    /* 自定义的滚动条样式 */
    .abScrollBar-box .bar { background:#fafafa; }
    .abScrollBar-box .bar em { background:#4ad585; }
</style>

3.  调用

<script type="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>

 相关链接

GitHub 地址 ：https://github.com/xiaomingmm/abScrollBar