Flex UI Library (1.6.10)
User Interface Resources
Theme Components Miscellaneous
Exploratory Components
Miscellaneous
Feature Examples
Address Search Contact Management Mobile Price Range 1 Price Range 2 Responsive Hot Sheet Responsive Layout
Product Marketing
Licensed Photos - [new window] Screenshot Library
Tools & Reference
Debug Tips
Perfect Scrollbar
Purpose

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).

Version

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.

Example
MLS
Remove
Quick Search
Remove
Hot Sheet
Remove
Change Listing
Remove
Office/Member
Remove
Address
Remove
Tour/Open Houses
Remove
Market Trends
Remove
Reports - General
Remove
Reports - Users
Remove
Change User
Remove
Full Copy
Remove
Fields - Main Listings
Remove
Rosters
Remove

<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>
Notes On The Example

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.