Bootstrap 4 Advanced Components : malihu custom scrollbar for Bootstrap 4 Daemonite

Bootstrap 4 Advanced Components : malihu custom scrollbar plugin for Bootstrap 4 and Daemonite material UI

by djibe89

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdn.rawgit.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>malihu custom scrollbar plugin for Bootstrap 4 - Advanced Components with daemonite material UI</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4 + Daemonite Material Design)</p>
          <blockquote class="blockquote">
          <p class="mb-0">
          Highly customizable custom scrollbar jQuery plugin, a creation of <a href="https://github.com/malihu/malihu-custom-scrollbar-plugin" target="_blank">malihu</a>.
          </p>
          </blockquote>
        <p class="lead">
          If you see this page unstyled, press Ctrl + F5 to reload it.
        </p>
        <h2>Setup</h2>
        <ol>
          <li>
            Add <code>
              &lt;link rel="stylesheet" href="https://cdn.rawgit.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css"&gt;
            </code> before your bootstrap css.
          </li>
          <li>Add mCustomScrollbar.concat.min.js to your page AFTER bootstrap.min.js<br>
      ...

CSS

.card {
  height: 150px;
  position: relative;
  overflow: auto;
}

/* Control the position of the "outside" scrollbar */
.mCSB_outside + .mCSB_scrollTools {
  right: -35px;
}

JavaScript

$(function() {
  $(window).on("load", function() {
    $("#scroll3").mCustomScrollbar({
      scrollButtons: {
        enable: true
      },
      theme: "dark-thin",
      scrollbarPosition: "outside",
      autoHideScrollbar: false,
      alwaysShowScrollbar: 2
    });
  });
});