abScrollBar is a scroll bar special effect plugin running based on jquery. Small size Use a simple scroll bar widget, slide the scroll bar in the page with the mouse, or drag the scroll bar with the mouse to view the content in the scroll box. The scroll bar style can be customized, and the scroll bar can be displayed horizontally or vertically. By default, the scroll bar can be displayed or hidden. Compatible with most browsers such as IE6+ Safari Opera Firefox Chrome.

new version update:

– v1.2 Added horizontal scroll bar display mode. Parameter scrollType x=slide horizontally, y=slide vertically. October 19, 2022

– abScrollBar v1.2 release October 17, 2022

Instructions

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

HTML structure

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

CSS styles

<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>

JS calling code

<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>