使用jquery.mCustomScrollbar自定义滚动条(2)
参考博客: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>
页面效果: