BootKit home · Manual home

JQUERY SLIMSCROLL

Enable scrolling sidebars on fixed height elements.
Visit the plugin page.


Available classes

Remark:
The slimscroll default border radius has been overridden with a small piece of code in slimscroll.less: it is just a personal taste and can easily be removed.

.slimScrollBar {
  border-radius: 0 !important;
}

Examples

HTML

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand bk-fg-textcolor" href="#">NAVBAR</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle bk-fg-textcolor" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <div class="dropdown-menu" style="min-width: 300px;">

                        <div class="panel bk-widget bk-bd-off bk-rd-off bk-box-shadow-off bk-mg-off-b">

                            <div class="panel-body">
                                <h4 class="bk-mg-off">HEADER</h4>
                            </div>

                            <div class="bk-scroll">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content I
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content II
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content III
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content IV
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content V
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content VI
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content VII
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content VIII
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content IX
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content X
                                </a>
                            </div>

                            <hr class="bk-hr-white bk-mg-off">

                            <div class="panel-body bk-ltr">
                                <div class="row text-center">
                                    <a class="col-xs-6 bk-pd-5 bk-fg-textcolor bk-bg-white bk-bg-darken">
                                        <small><i class="fa fa-history"></i> HISTORY</small>
                                    </a>
                                    <a class="col-xs-6 bk-pd-5 bk-fg-textcolor bk-bg-white bk-bg-darken">
                                        <small><i class="fa fa-check"></i> MARK ALL READ</small>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle bk-fg-textcolor" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <div class="dropdown-menu dropdown-menu-right" style="min-width: 300px;">

                        <div class="panel bk-widget bk-bd-off bk-rd-off bk-box-shadow-off bk-mg-off-b">

                            <div class="panel-body">
                                <h4 class="bk-mg-off">HEADER</h4>
                            </div>

                            <div class="bk-scroll">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content I
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content II
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content III
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content IV
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content V
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content VI
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content VII
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content VIII
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content IX
                                </a>
                                <hr class="bk-hr-white bk-mg-off">
                                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
                                    Panel content X
                                </a>
                            </div>

                            <hr class="bk-hr-white bk-mg-off">

                            <div class="panel-body bk-ltr">
                                <div class="row text-center">
                                    <a class="col-xs-6 bk-pd-5 bk-fg-textcolor bk-bg-white bk-bg-darken">
                                        <small><i class="fa fa-history"></i> HISTORY</small>
                                    </a>
                                    <a class="col-xs-6 bk-pd-5 bk-fg-textcolor bk-bg-white bk-bg-darken">
                                        <small><i class="fa fa-check"></i> MARK ALL READ</small>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

JQUERY

All scrollbars are triggered by the same code which can be found on the bottom of this page.

WIDGET CONTENT

HTML

<div class="panel bk-widget">
    <div class="panel-heading bk-bg-white clearfix">
        <h4 class="pull-left bk-mg-b-5">PANEL HEADING</h4>
        <div class="pull-right">
            <i class="fa fa-database fa-2x bk-pd-t-5"></i>
        </div>
    </div>
    <div class="bk-scroll">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content I
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content II
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content III
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content IV
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content V
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content VI
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content VII
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content VIII
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content IX
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger">
            Panel content X
        </a>
    </div>
</div>

JQUERY

$('.bk-scroll').slimscroll(
    {
        distance: '0',
        color: '#F78852',
        railVisible: true,
        railColor: '#ccc',
        size: '5px'
    }
);