JQUERY CUSTOM CONTENT SCROLLER 的使用方法和技巧

时下有很多通过js实现滑动滚动的方法,各种plugin,插件。今天第一次试用jquery custom scrollbar,效果相当强大,兼容性也很好。

使用方法:

  1. 下载jquery-ui,只需取得当中的jquery-ui.min.js文件即可

  2. 下载jquery custom scrollbar插件

    下载地址:http://manos.malihu.gr/jquery-custom-content-scroller
    取得当中的三件文件

    • jquery.easing.1.3.js
    • jquery.mousewheel.min.js
    • jquery.mCustomScrollbar.js
  3. 把以上四个文件复制到js目录,如/js

  4. 在页面中调用这四个文件

     <script src="/js/xxxxxxxxxxxx.js"></script>
    
  5. 参考Demo建立其结构

    如下例中,mcs_container是主container,customScrollBox是主体,container.content是要滚动的内容,dragger_container是滚动模块,dragger是滚动条的可拖动部分,scrollUpBtn和scrollDownBtn是滚动条上下方的箭头按钮:

     <div id="mcs_container">
         <div class="customScrollBox">
             <div class="container">
                 <div class="content">
                     内容
                 </div>
             </div>
             <div class="dragger_container">
                 <div class="dragger"></div>
             </div>
         </div>
         <a href="#" class="scrollUpBtn"></a>
         <a href="#" class="scrollDownBtn"></a>
     </div>
    
  6. 设置容器及滚动条样式

    技巧:

     #mcs_container 主容器,注意宽高度设置
    
    • .customScrollBox 主体,position必须定义为relative
    • .container 内容容器,宽度设置是关键,要小于内容的宽度与滚动条宽度之和

    详细请参考Demo的样式,建议复制后修改样式进行使用:

     #mcs_container{position:relative; top:140px; margin:0 0 0 40px; width:260px; height:600px; padding:0 10px; border-top:1px solid #333; border-bottom:1px solid #333;}
     #mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
     #mcs_container .customScrollBox .container{position:relative; width:240px; top:0; float:left;}
     #mcs_container .customScrollBox .content{clear:both;}
     #mcs_container .customScrollBox .content p{padding:0 5px; margin:10px 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px;}
     #mcs_container .customScrollBox .content p.alt{padding:10px 5px; margin:10px 0; color:#fff; font-family:Georgia, "Times New Roman", Times, serif; font-size:17px; line-height:19px; color:#999;}
     #mcs_container .customScrollBox img{border:5px solid #fff;}
     #mcs_container .dragger_container{position:relative; width:2px; height:525px; float:left; margin:40px 0 0 10px; background:#000; cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;}
     #mcs_container .dragger{position:absolute; width:2px; height:60px; background:#999; text-align:center; line-height:60px; color:#666; overflow:hidden; cursor:pointer; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
     #mcs_container .dragger_pressed{position:absolute; width:4px; margin-left:-1px; height:60px; background:#999; text-align:center; line-height:60px; color:#666; overflow:hidden; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:s-resize;}
     #mcs_container .scrollUpBtn,
     #mcs_container .scrollDownBtn{position:absolute; display:inline-block; width:14px; height:15px; margin-right:12px; text-decoration:none; right:0; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity:0.20; opacity:0.20;}
     #mcs_container .scrollUpBtn{top:16px; background:url(mcs_btnUp.png) center center no-repeat;}
     #mcs_container .scrollDownBtn{bottom:12px; background:url(mcs_btnDown.png) center center no-repeat;}
     #mcs_container .scrollUpBtn:hover,
     #mcs_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;}
    
  7. 开启滚动效果

     $(window).load(function() {
         $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
     });
    

    以上参数依次是('方向','滚动速度','拖动类型','底部空白高/宽度','滑动块类型','滚轮支持','按钮支持','按钮速度')

  8. 水平滚动

    在container外加一个div,class为horWrapper

    7中的mCustomScrollbar第一参数改为'horizontal'

    其他与垂直滚动基本一样

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏