html - 启动 Bootstrap SB Admin 滚动导航栏元素

Question

对于那些对导航栏不滚动有疑问的人(https://startbootstrap.com/template-overviews/sb-admin/)。可能有更好的方法来执行此操作，但我通过将以下内容添加到 css 文件来修复它。

.navbar-sidenav {
    overflow-y: auto !important;
    -ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
}

祝你好运，格雷格

Answer 1

花了一些时间才弄明白这一点。上面的代码允许滚动，但溢出弄乱了工具提示。必须修改其他一些东西才能使其工作。在下面添加额外的 css 代码，更改下面的 javascript 函数并将类添加到 html 文件中，如下面的代码。希望这对其他人有帮助...

CSS

.sidenav-not-toggled {
    overflow-x: auto !important;
}
.navbar-sidenav {
    -ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
}

JavaScript

// Toggle the side navigation
$("#sidenavToggler").click(function(e) {
    e.preventDefault();
    $("body").toggleClass("sidenav-toggled");
    $(".navbar-sidenav").toggleClass("sidenav-not-toggled");
    $(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
    $(".navbar-sidenav .nav-link-collapseLink").addClass("collapsed");
    $(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
});

HTML

<ul class="navbar-nav navbar-sidenav sidenav-not-toggled" id="dashboardAccordion">