jquery.slimscroll.min.js轮动条插件

引用:

  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.slimscroll.min.js"></script>

html:

<div class="slimscroll">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum exercitationem distinctio neque mollitia pariatur aliquid odio nemo soluta porro inventore vel aperiam praesentium alias commodi officiis rem possimus sequi repellendus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam cum voluptatem necessitatibus quaerat perferendis est beatae? Cumque minima ratione labore doloremque est quisquam quibusdam nemo ad nihil cum similique quo.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quas iste nemo rerum perspiciatis autem sed explicabo asperiores quae animi! Repellendus est suscipit necessitatibus error facilis minima doloribus ut id.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea doloremque officia adipisci nostrum tempora quis at reiciendis deserunt? Quod dolorum voluptatem libero numquam autem explicabo odit quasi cum beatae vel.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore doloribus maxime non expedita eius excepturi quam atque nam hic pariatur! Provident explicabo tenetur incidunt sit vitae dolorum iste atque voluptatibus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam cum voluptatem necessitatibus quaerat perferendis est beatae? Cumque minima ratione labore doloremque est quisquam quibusdam nemo ad nihil cum similique quo.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quas iste nemo rerum perspiciatis autem sed explicabo asperiores quae animi! Repellendus est suscipit necessitatibus error facilis minima doloribus ut id.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea doloremque officia adipisci nostrum tempora quis at reiciendis deserunt? Quod dolorum voluptatem libero numquam autem explicabo odit quasi cum beatae vel.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore doloribus maxime non expedita eius excepturi quam atque nam hic pariatur! Provident explicabo tenetur incidunt sit vitae dolorum iste atque voluptatibus!</p>
</div>


js:

    $(".slimscroll").slimScroll({
        width:'300px',
         size: '7px',  
         color: '#000',  
         position:'right',  
         height: "200px", 
         alwaysVisible: true,  
         railVisible: true,  
         disableFadeOut: true  
    });


                                             

注:slimscroll插件参数的使用

      width:'100px',//容器宽度,默认无  
      height:'100px',//容器高度,默认250px  
      size:'10px',//滚动条宽度,默认7px  
      position:'left',//滚动条位置,可选值:left,right,默认right  
      color:'#abc',//滚动条颜色,默认#000000  
      alwaysVisible:true,//是否禁用隐藏滚动条,默认false  
      distance:'10px,'//距离边框距离,位置由position参数决定,默认1px  
      start:'.p',//滚动条初始位置,可选值top,bottom,$(selector)--内容元素位置,默认top  
      wheelStep:'12px',滚动条滚动值,默认10px  
      railVisible:true,//滚动条背景轨迹,默认false  
      railColor:'#005612',//滚动条背景轨迹颜色,默认#333333  
      railOpacity:0.8,//滚动条背景轨迹透明度,默认0.2  
      allowPageScroll:true,//滚动条滚动到顶部或底部时是否允许页面滚动,默认false  
      scrollTo:'50px',//跳转到指定的滚动值。可以呼吁任何元素slimScroll已经启用了吗(没试过)  
      scrollBy:'50px'增加/减少当前滚动值由指定的数量(正面或负面)。可以呼吁任何元素slimScroll已经启用(没试过)  
      disableFadeOut:true,//是否禁用鼠标在内容处一定时间不动隐藏滚动条,当设置alwaysVisible为true时该参数无效,默认false  
      touchScrollStep:1000,//可以设置不同的触摸滚动事件的敏感性。负数反转方向滚动,默认200


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值