[记录] nicescroll 在bootstrap tabs中工作-优快云博客

本文介绍了一种在使用Bootstrap的tab组件时，实现各tab页内独立且不相互干扰的niceScroll滚动条的方法。通过JavaScript对滚动条进行控制，在切换不同的tab时隐藏当前未激活tab页面内的滚动条，只显示当前活动tab页面内的滚动条。

Operlapping Nicescroll scrolbars in Bootstrap tabs

因为我的tab是指定id的

<!-- Nav tabs -->
                        <ul class="nav nav-tabs" id="vtTab" role="tablist">
                            <li role="presentation" class="active"><a href="#aero" aria-controls="aero" role="tab" data-toggle="tab">Test1</a></li>
                            <li role="presentation"><a href="#musc" aria-controls="musc" role="tab" data-toggle="tab">Test2</a></li>
                            <li role="presentation"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab">Test3</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="aero">
                                <div id="aero_content"></div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="musc">
                                <div id="musc_content"></div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="daily">
                                <div id="daily_content"></div>
                            </div>
                        </div>

JS:

    //滚动条
    $("#aero,#musc,#daily").niceScroll({
        touchbehavior:false,
        cursorwidth:6,
        cursorborder:"0px",
        cursorborderradius:"15px",
        background:"rgba(255,255,255,0)",
        autohidemode:"true"
    });  // hw acceleration enabled when using wrapper

 1   $('#vtTab a').click(function (e) {
 2         e.preventDefault()
 3         $(this).tab('show');
 4         //切换滚动条
 5         $("#aero,#musc,#daily").getNiceScroll().hide();
 6         switch (index){
 7             case 0:
 8                 $("#aero").getNiceScroll().show();
 9                 break;
10             case 1:
11                 $("#musc").getNiceScroll().show();
12                 break;
13             case 2:
14                 $("#daily").getNiceScroll().show();
15                 break;
16         }
17 
18     })