Scrollbar on the Double Side navigation dont work?

<!--Double navigation-->
<header>
 <!-- Sidebar navigation -->
 <div id="slide-out" class="side-nav sn-bg-4">
 <ul class="custom-scrollbar list-unstyled">
 <!-- Logo -->
 <li>
 <div class="logo-wrapper waves-light">
 <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
 </div>
 </li>
 <!--/. Logo -->
 <!--Social-->
 <li>
 <ul class="social">
 <li><a href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
 <li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
 <li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
 <li><a href="#" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
 </ul>
 </li>
 <!--/Social-->
 <!--Search Form-->
 <li>
 <form class="search-form" role="search">
 <div class="form-group waves-light">
 <input type="text" class="form-control" placeholder="Search">
 </div>
 </form>
 </li>
 <!--/.Search Form-->
 <!-- Side navigation links -->
 <li>
 <ul class="collapsible collapsible-accordion">
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-video-camera"></i> Series<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Dragon Ball</a></li>
 <li><a href="#" class="waves-effect">Dragon Ball Z</a></li>
 <li><a href="#" class="waves-effect">Dragon Ball GT</a></li>
 <li><a href="#" class="waves-effect">Dragon Ball Super</a></li>
 <li><a href="#" class="waves-effect">Dragon Ball Super [Latino]</a></li>
 </ul>
 </div>
 </li>
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-video-camera"></i> Peliculas DB<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Pelicula #1</a></li>
 <li><a href="#" class="waves-effect">Pelicula #2</a></li>
 <li><a href="#" class="waves-effect">Pelicula #3</a></li>
 <li><a href="#" class="waves-effect">Pelicula #4</a></li>
 </ul>
 </div>
 </li>
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-video-camera"></i> Peliculas DBZ<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Pelicula #1</a></li>
 <li><a href="#" class="waves-effect">Pelicula #2</a></li>
 <li><a href="#" class="waves-effect">Pelicula #3</a></li>
 <li><a href="#" class="waves-effect">Pelicula #4</a></li>
 <li><a href="#" class="waves-effect">Pelicula #5</a></li>
 <li><a href="#" class="waves-effect">Pelicula #6</a></li>
 <li><a href="#" class="waves-effect">Pelicula #7</a></li>
 <li><a href="#" class="waves-effect">Pelicula #8</a></li>
 <li><a href="#" class="waves-effect">Pelicula #9</a></li>
 <li><a href="#" class="waves-effect">Pelicula #10</a></li>
 <li><a href="#" class="waves-effect">Pelicula #11</a></li>
 <li><a href="#" class="waves-effect">Pelicula #12</a></li>
 <li><a href="#" class="waves-effect">Pelicula #13</a></li>
 <li><a href="#" class="waves-effect">Pelicula #14</a></li>
 <li><a href="#" class="waves-effect">Pelicula #15</a></li>
 </ul>
 </div>
 </li>
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-video-camera"></i> Peliculas DBGT<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Pelicula #1</a></li>
 </ul>
 </div>
 </li>
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-video-camera"></i> Especiales DBZ<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Pelicula #1</a></li>
 </ul>
 </div>
 </li>
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-video-camera"></i> Ovas's<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Pelicula #1</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </li>
 <!--/. Side navigation links -->
 </ul>
 <div class="sidenav-bg mask-strong"></div>
 </div>
 <!--/. Sidebar navigation -->
 <!-- Navbar -->
 <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">
 <!-- SideNav slide-out button -->
 <div class="float-left">
 <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
 </div>
 <!-- Breadcrumb-->
 <div class="breadcrumb-dn mr-auto">
 <p>Material Design for Bootstrap</p>
 </div>
 <ul class="nav navbar-nav nav-flex-icons ml-auto">
 <li class="nav-item">
 <a class="nav-link"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link"><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown
 </a>
 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 </ul>
 </nav>
 <!-- /.Navbar -->
</header>
<!--/.Double navigation-->

var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);