带抓手功能的自定义滚动条 jquerySmilebar

由于项目需要支持ie9以上浏览器并需要带有抓手功能,网络上也并未出现过相同功能的插件,本人封装了一个可控的带抓手功能的自定义滚动条,已发布到jq插件库，如有需要可移步jq插件库或者gitee仓库自行下载。

• 效果图

使用方法：

• 需要文件:

  js--jquery.min.js , jquery.smilebar.min.js
  css--jquery.smilebar.min.css
  img--smilebarImg
  

• 引入:

  <link rel="stylesheet" href="css/jquery.smilebar.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.smilebar.min.js"></script>
  

• 使用:

  $("#Ele").smilebar({
      handBle:true
  });
  

• 注意:

  1."#Ele",各选择器尽量用id选择器,确保唯一性
  2.该元素宽高必须为固定宽高； 
  3.当该元素宽高会动态改变时， 需要在改变的时候调用update() 方法； 
  4.若需要动态添加内容， 需要添加到$("Ele>smilerbar-content") 内；
  

• 配置:

  配置 config:
      type:类型
           默认 "xy"       //x:水平  y:垂直    除"x"和"y":水平垂直
      size:滚动条大小
           默认12px
      color:滚动条颜色
           默认#252a35
      silderSize:滑块大小
           默认60%   范围[20%-100%]
      silderColor:滑块颜色
           默认#404550
      clickBln:点击开关
           默认true       //其他激活方法：实例加上字段:data-click="true"
      keyBln:键盘开关
           默认true       //其他激活方法：实例加上字段:data-key="true"
      keySpeed:键盘移动速率
           默认 1   范围[0-100]
      wheelBln:滚轮开关
           默认true       //其他激活方法：实例加上字段:data-wheel="true"
      wheelSpeed:键盘移动速率
           默认 1   范围[0-100]
      handBln:抓手功能开关
           默认false      //其他激活方法：实例加上字段:data-hand="true"
      handSpeed:抓手速率
           默认 30  范围[0-100]
      initPosition：初始移动位置
           默认{x:0,y:0}  //{三种写法：1:number(px单位)  
                             2：string("%"单位)   
                             3：string  ("first":顶端   "center"：中间   "last":末尾)