常用的theme:
dark light light-2 light-3 light-thick light-thin dark-thin
inset inset-2" 3d 3d-dark 3d-thick minimal-dark
下面是最简单的使用例子:
<!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"> <style type="text/css"> .content{ width: 500px; margin: 0 auto; border: 1px solid #ccc; padding: 10px 0 10px 10px; max-height: 300px; overflow: auto; } /** 覆盖最初的滚动条样式 */ .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #333; width: 6px; } .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #333; background-color: rgba(102,102,102,0.9); } </style> </head> <body> <div class="container"> <div class="row"> <h3 class="text-center">详情描述</h3> <div class="content mCustomScrollbar"> 所谓的甩头。就是虚实举球马上停加碎步。 就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向 带着这几点疑问看视频吧: 1.C防两个人的时候是怎么防的? 2.怎么应对女PF的钟头? 3.被吸到的时候是怎么保证不倒的?还是就不让敌人吸到你? 4.篮板是怎么抢的? 等分? 直接秒? 所谓的甩头。就是虚实举球马上停加碎步。 就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向 带着这几点疑问看视频吧: 1.C防两个人的时候是怎么防的? 2.怎么应对女PF的钟头? 3.被吸到的时候是怎么保证不倒的?还是就不让敌人吸到你? 4.篮板是怎么抢的? 等分? 直接秒? 所谓的甩头。就是虚实举球马上停加碎步。 就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向 带着这几点疑问看视频吧: 1.C防两个人的时候是怎么防的? 2.怎么应对女PF的钟头? 3.被吸到的时候是怎么保证不倒的?还是就不让敌人吸到你? 4.篮板是怎么抢的? 等分? 直接秒? 所谓的甩头。就是虚实举球马上停加碎步。 就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向 带着这几点疑问看视频吧: 1.C防两个人的时候是怎么防的? 2.怎么应对女PF的钟头? 3.被吸到的时候是怎么保证不倒的?还是就不让敌人吸到你? 4.篮板是怎么抢的? 等分? 直接秒? 所谓的甩头。就是虚实举球马上停加碎步。 就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向 带着这几点疑问看视频吧: 1.C防两个人的时候是怎么防的? 2.怎么应对女PF的钟头? 3.被吸到的时候是怎么保证不倒的?还是就不让敌人吸到你? 4.篮板是怎么抢的? 等分? 直接秒? 所谓的甩头。就是虚实举球马上停加碎步。 就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向 带着这几点疑问看视频吧: 1.C防两个人的时候是怎么防的? 2.怎么应对女PF的钟头? 3.被吸到的时候是怎么保证不倒的?还是就不让敌人吸到你? 4.篮板是怎么抢的? 等分? 直接秒? </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"> </script> </html>
效果:
![](https://images2018.cnblogs.com/blog/1050478/201803/1050478-20180329233428319-1569305563.png)
可以自定义滚动条样式,对于同一页面多个滚动条,官方推荐如下的写法:
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ / 1st scrollbar dragger style… / } ._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ / 2nd scrollbar dragger style… / } ._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ / 3rd scrollbar dragger style… / }