Skip to main content

Scrollbar

Create a simple but highly customizable custom scrollbar with jQuery plugin.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
Copy

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

<script src="../../assets/js/helpers/components/hs.malihu-scrollbar.js"></script>
Copy

Basic example

Set your height to a specific value.

Scrollbar example

We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation.

Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.

It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.

We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.

As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.

At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.

End of content.

<div class="js-scrollbar" style="height: 300px;">
  <h2>Scrollbar example</h2>
  <p>We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation.</p>
  <p>Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.</p>
  <p>It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.</p>
  <p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
  <p>As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.</p>
  <p>At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.</p>
  <hr>
  <p>End of content.</p>
</div>
Copy

JavaScript behavior

Methods

List of available JavaScript methods:

JavaScript function Description Default value

scrollInertia

 Set the amount of scrolling momentum as animation duration in milliseconds. Higher value equals greater scrolling momentum which translates to smoother/more progressive animation. Set to 0 to disable. 150

theme

 The appearance of the scrollbar. Set the theme option parameter to any of the ready-to-use themes available in jquery.mCustomScrollbar.css, for example: minimal-dark

Official Documentation

For more detailed information, see the official documentation: Malihu documentation.