Tiny jQuery Plugin For Beautifying Scrollbar - perfect-scrollbar

Tiny jQuery Plugin For Beautifying Scrollbar - perfect-scrollbar
File Size: 349 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

perfect-scrollbar is a lightweight jQuery JavaScript plugin that allows you to beautify the default scroll bars without changing or adding any style on original elements. With perfect-scrollbar plugin, the scrollbar on your page is fully customizable and flexible to fit your needs. 

You might also like:

How to use it:

1. Include perfect-scrollbar CSS

<link href="min/perfect-scrollbar.min.css" rel="stylesheet">

2. Markup

<div id="Demo">
<div class="content"> </div>
</div>

3. Include necessary javascript files.

<script src="min/perfect-scrollbar.min.js"></script> 

4. Call the plugin

new PerfectScrollbar('#Demo', {
    // options here
});

6. Options and defaults.

new PerfectScrollbar('#container', {


    // A list of handlers to scroll the element.
    handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],

    // The scroll speed applied to mousewheel event.
    wheelSpeed: 1,

    // If true, when the scroll reaches the end of the side, 
    // mousewheel event will be propagated to parent element.
    wheelPropagation: false, 

    // When set to an integer value, the thumb part of the scrollbar
    // will not shrink below that number of pixels.
    minScrollbarLength: null,

    // When set to an integer value, the thumb part of the scrollbar 
    // will not expand over that number of pixels.
    maxScrollbarLength: null, 

    // When set to true, and only one (vertical or horizontal) scrollbar
    // is visible then both vertical and horizontal scrolling will affect the scrollbar.
    useBothWheelAxes: false, 

    // When set to true, the scroll bar in X axis will not be available, 
    // regardless of the content width.
    suppressScrollX: false, 

    // When set to true, the scroll bar in Y axis will not be available, 
    // regardless of the content height.
    suppressScrollY: false, 

    // true: swipe scrolling will be eased
    swipeEasing: true,

    // The number of pixels the content width can surpass the 
    // container width without enabling the X axis scroll bar. 
    scrollXMarginOffset: 0, 

    // The number of pixels the content height can surpass the 
    // container height without enabling the Y axis scroll bar. 
    scrollYMarginOffset: 0, 

});

More Examples:

Change Logs:

v1.3.2 (2017-12-01)

v0.5.8 (2014-12-02)

  • Update.

v0.5.7 (2014-11-06)

  • Update.

v0.5.6 (2014-10-29)

  • Change how scrollbar rails are being hidden.

v0.5.5 (2014-10-24)

  • Filter touch events not to be handled.

v0.5.4 (2014-10-22)

  • Stop propagation and prevent default for touch events.

v0.5.3 (2014-10-14)

  • compatible with iframes.
  • add int() helper instead of parseInt.

v0.5.2 (2014-9-28)

  • update

v0.5.1 (2014-9-16)

  • Mousewheel fixes for Firefox and IE 10.

v0.4.11 (2014-8-25)

  • Remove jquery-mousewheel dependencies.

v0.4.10 (2014-4-28)

  • update.

v0.4.9 (2014-4-2)

  • update.

v0.4.8 (2014-1-22)

  • Fix the bug that scrollbar rails show when they shouldn't.

v0.4.7 (2014-1-21)

  • Add an example about the callback to check if it reaches the end.

v0.4.6 (2013-12-6)

  • Add an example for scroll suppression feature.

v0.4.5 (2013-10-1)

  • Add click handlers on scrollbar rails to scroll to the position.
  • Add an example for 'useBothWheelAxes' option.
  • Implement keyboard scrolling.

v0.4.4 (2013-9-9)

  • updated to the latest version

v0.4.1 (2013-5-18)

  • Code refactoring.

v0.3.4 (2013-5-18)

  • Code refactoring.

v0.3.3 (2013-3-14)

  • Features Update.

v0.2.5 (2013-2-8)

  • Bug fix.
  • Include min version with jquery-mousewheel.

This awesome jQuery plugin is developed by utatti. For more Advanced Usages, please check the demo page or visit the official website.