Perfect Scrollbar is used in places where a scrollbar needs to always be visible regardless of the user's operating system settings (i.e., Mac users have control of when scrollbars appear).
The version we're using works well and suits our needs. However, the version we're using is relatively old: 0.6.16. This version still supports jQuery, whereas versions 1.0 and above do not. If we upgrade to 1.x, we will need to change how the library is used in our client programs.
Perfect Scrollbar can be found at https://github.com/utatti/perfect-scrollbar.
<style>
.perfect-scrollbar-container {
height: 250px;
position: relative;
}
</style>
<script>
$(function () {
$('#psContainer').perfectScrollbar({ suppressScrollX: true })
});
</script>
<div class="c-container--canvas perfect-scrollbar-container" id="psContainer">
<div class="c-sortable-list c-card">
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
MLS
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Quick Search
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Hot Sheet
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Change Listing
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Office/Member
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Address
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Tour/Open Houses
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Market Trends
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Reports - General
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Reports - Users
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Change User
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Full Copy
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Fields - Main Listings
</div>
<a class="u-link--plain">Remove</a>
</div>
<div class="c-list-entry">
<div class="flexicon flexicon-bars--alt"></div>
<div class="c-list-entry__title">
Rosters
</div>
<a class="u-link--plain">Remove</a>
</div>
</div>
</div>
The container div is set to a shorter height than its contents in order to show how the scrollbar
works. The container div also has to have position: relative for the scrollbar to be
placed correctly.