perfect-scrollbar - Tiny but perfect scrollbar

perfect-scrollbar - Tiny but perfect jQuery scrollbar plugin

Why perfect-scrollbar?

I worked on a personal project recently, and I was trying to find the jQuery scrollbar plugin that's perfect. But there was no perfect scrollbar plugin. That's why I decided to make one.

perfect-scrollbar is very tiny but perfect (for me, and maybe for the most of developers) jQuery scrollbar plugin.

What does perfect mean?

• There should be no css change on any original element.
• The scrollbar should not affect the original design layout.
• The design of the scrollbar should be (nearly) fully customizable.
• If the size of the container or the content changes, the scrollbar size and position should be able to change.

Then perfect-scrollbar is really perfect?

• perfect-scrollbar has some requirements, but doesn't change or add any style on original elements.
• perfect-scrollbar is designed not to have width or height. It's fixed on the right and bottom side of the container.
• You can change nearly all css styles of the scrollbar. The scrollbar design has no dependency on scripts.
• perfect-scrollbar support 'update' function. Whenever you need to update the size or position of the scrollbar, just update.
• Additionally, perfect-scrollbar do use 'scrollTop' and 'scrollLeft', not absolute position or something messy.

Source: noraesae.github.io

1. INCLUDE CSS AND JS FILES

<link href="../src/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../src/jquery.mousewheel.js"></script>
<script src="../src/perfect-scrollbar.js"></script>

2. HTML

<div id="description" class="wrapper">
      <div>
        <p>The command takes options applicable</p>
        <p>The command takes options applicable</p>
        <p>The command takes options applicable</p>
        <p>The command takes options applicable</p>
        <p>The command takes options applicable</p>
        <p>The command takes options applicable</p>
      </div>
</div>

3. JAVASCRIPT

$(document).ready(function ($) {
        $('#description').perfectScrollbar({
          wheelSpeed: 20,
          wheelPropagation: false
        });
});

4. CSS

#description {
        border: 1px solid gray;
        height:150px;
        width: 400px;
        overflow: hidden;
        position: absolute;
}

5. OPTIONS

erfect-scrollbar supports optional parameters.

wheelSpeed

The scroll speed applied to mousewheel event.
Default: 10

wheelPropagation

If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element.
Default: false

minScrollbarLength

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

useBothWheelAxes

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

useKeyboard

When set to true, the scroll works with arrow keys on the keyboard. The element is scrolled only when the mouse cursor hovers the element.
Default: true

suppressScrollX

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

suppressScrollY

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

scrollXMarginOffset

The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels.
Default: 0

scrollYMarginOffset

The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels.
Default: 0

includePadding

When set to true, it uses innerWidth and innerHeight for the container size instead of width and height. When your container element has non-zero padding and the scrollbar layout looks weird, this option can be helpful.
Default: false