參考博客：http://www.qianxingzhem.com/post-1602.html
接着上篇，另一個使用的例子，使用js來初始化滾動條，並且div中的內容可變化。需要調用相應的方法，
代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery版的自定義滾動條</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"> <!--<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.min.css">--> <link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.css"> <style type="text/css"> .content{ width: 500px; margin: 0 auto; border: 1px solid #ccc; padding: 10px 0 10px 10px; height: 300px; overflow: auto; display: none; } .toolbar{ width: 500px; margin: 0 auto; margin-top: 20px; } /** 覆蓋滾動條樣式 */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #333; } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #333; background-color: rgba(102,102,102,0.9); } .mCSB_inside > .mCSB_container { margin-right: 20px; } </style> </head> <body> <div class="container"> <div class="row"> <h3 class="text-center">詳情描述</h3> <!--<div class="content mCustomScrollbar" data-mcs-theme="dark"></div>--> <div class="content"> </div> <div class="toolbar"> <button class="btn btn-default" id="btn_show">點擊顯示內容</button> <button class="btn btn-default" id="btn_append">點擊加載內容</button> <button class="btn btn-default" id="btn_clear">點擊清除內容</button> </div> </div> </div> </body> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> <script src="jquery/jquery.mCustomScrollbar.concat.min.js"></script> <script type="text/javascript"> $(function(){ $(".content").mCustomScrollbar({ theme:"dark-3", scrollbarPosition: 'inside', //滾動條在內部還是外部 scrollInertia:100, //滾動延遲, 0禁用 //autoDraggerLength:true, //滾動條長度是否隨內容多少而變 autoHideScrollbar:false, //自動隱藏滾動條 horizontalScroll:false, //是否創建水平滾動條 scrollButtons:{ enable: true //是否使用上下滾動按鈕 } }); $('#btn_clear').click(function(){ $('.content .mCSB_container').text(''); }); $('#btn_show').click(function(){ $('.content').show(); }); $('#btn_append').click(function(){ var string = '所謂的甩頭。就是虛實舉球馬上停加碎步。就是籃筐反方向鍵。↓W或者下DW。馬上停。然后調整人物方向帶着這幾點疑問看視頻吧：1.C防兩個人的時候是怎么防的？2.怎么應對女PF的鍾頭？3.被吸到的時候是怎么保證不倒的？還是就不讓敵人吸到你？4.籃板是怎么搶的？ 等分？ 直接秒？'; for(var i=0; i<3;i++){ string += string; } $('.content .mCSB_container').append(string); $('.content').mCustomScrollbar('update'); }) }); </script> </html>
頁面效果：
