Scrollbar

Responsive and slick progress bars with animated SVG paths.

// Css
<link rel="stylesheet" href="css/vendor/OverlayScrollbars.min.css" />

// Javascript
<script src="js/vendor/OverlayScrollbars.min.js"></script>

// OverlayScrollbars is already initialized for '.scroll' class throughout the projects. 
OverlayScrollbars(document.querySelectorAll('.scroll'), {
  scrollbars: {autoHide: 'leave', autoHideDelay: 600},
  overflowBehavior: {x: 'hidden', y: 'scroll'},
});

<div class="scroll sh-35">
  <p>
    Croissant croissant donut marshmallow ice cream apple pie caramels wafer. Dragée oat cake cheesecake liquorice bonbon cheesecake.
    Sesame snaps muffin marzipan caramels liquorice cake sugar plum candy. Muffin marzipan marzipan marshmallow chocolate bar. Carrot
    cake toffee jelly biscuit candy cotton candy dessert wafer. Bear claw tiramisu bonbon dragée biscuit tootsie roll macaroon
    marshmallow cotton candy. Tiramisu donut dessert apple pie cheesecake croissant sweet tart. Ice cream gingerbread marzipan donut.
    Donut caramels biscuit candy candy pie. Powder cookie cookie. Chocolate chocolate bar cheesecake dessert cheesecake chocolate
    cake. Jelly cupcake apple pie topping tiramisu ice cream.
  </p>
  <p>
    Pudding jelly powder halvah. Croissant wafer brownie lollipop candy cookie croissant. Jelly beans sweet biscuit chupa chups halvah
    cookie soufflé biscuit. Jujubes carrot cake powder jelly beans. Gummi bears chupa chups lollipop cotton candy candy canes.
  </p>
  <p>
    Sweet roll apple pie lemon drops halvah macaroon tiramisu topping. Lemon drops cake bear claw icing topping. Muffin jelly beans
    cupcake cake. Tiramisu brownie cookie pie caramels. Cupcake icing toffee. Donut oat cake candy tootsie roll. Danish sweet
    chocolate cake muffin. Jujubes jelly beans sugar plum biscuit pie cake. Muffin cupcake toffee sweet roll cookie. Topping tart
    cotton candy caramels toffee croissant chocolate cake cookie toffee. Croissant carrot cake apple pie marshmallow gummi bears
    macaroon chupa chups cheesecake. Jelly-o oat cake tootsie roll.
  </p>
  <p>
    Tiramisu brownie cookie pie caramels. Cupcake icing toffee. Donut oat cake candy tootsie roll. Danish sweet chocolate cake muffin.
    Jelly beans sweet biscuit chupa chups halvah cookie soufflé biscuit. Jujubes carrot cake powder jelly beans.
  </p>
</div>

// This Initialization is also called throughout the projects. Just add the scroll-by-count class and data-count property in html and it should work.
document.querySelectorAll('.scroll-by-count').forEach((el) => {
  if (typeof ScrollbarByCount === 'undefined') {
    console.log('ScrollbarByCount is undefined!');
    return;
  }
  let scrollByCount = new ScrollbarByCount(el);
});

<div class="scroll-out">
  <div class="scroll-by-count" data-count="3">
    <div class="card mb-2 hover-border-primary">
      <div class="card-body d-flex flex-column justify-content-center">
        <div class="d-flex flex-column">
          <div class="text-alternate">Add New Volume</div>
          <div class="text-small text-muted">Snaps muffin macaroon.</div>
        </div>
      </div>
    </div>
    <div class="card mb-2 hover-border-primary">
      <div class="card-body d-flex flex-column justify-content-center">
        <div class="d-flex flex-column">
          <div class="text-alternate">Cloud Storage</div>
          <div class="text-small text-muted">Brownie ice cream marshmallow topping.</div>
        </div>
      </div>
    </div>
    <div class="card mb-2 hover-border-primary">
      <div class="card-body d-flex flex-column justify-content-center">
        <div class="d-flex flex-column">
          <div class="text-alternate">Server Security</div>
          <div class="text-small text-muted">Sugar plum gummi bears jujubes.</div>
        </div>
      </div>
    </div>
    <div class="card mb-2 hover-border-primary">
      <div class="card-body d-flex flex-column justify-content-center">
        <div class="d-flex flex-column">
          <div class="text-alternate">Track Metrics</div>
          <div class="text-small text-muted">Jujubes candy jelly-o topping.</div>
        </div>
      </div>
    </div>
    <div class="card mb-2 hover-border-primary">
      <div class="card-body d-flex flex-column justify-content-center">
        <div class="d-flex flex-column">
          <div class="text-alternate">Integration Guides</div>
          <div class="text-small text-muted">Jujubes candy jelly-o topping.</div>
        </div>
      </div>
    </div>
  </div>
</div>

This plugin is initialized in common.js file and it's sources are included in every file. It would be enough to include required files and html. To learn more about this, please see Common.js page .

You may find more examples in Interface.Plugins.Scrollbar.html file which is initialized by js/common.js.