jQuery Plugin For Custom Scrollbar - scrollbox

scrollbox is a lightweight jQuery plugin that applies a custom Scrollbar to your content, which triggers events when reached the defined point.

How to use it:

1. Include the scrollbox plugin and other required resources on your page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery.mousewheel.min.js"></script>
<script src="/path/to/dist/js/scrollbox.min.js"></script>

2. Include scrollbox CSS to style your plugin.

<link href="/path/to/dist/css/scrollbox.min.css" rel="stylesheet" />

3. The HTML markup.

<div id="container"> [CONTENT] </div>

4. Make the container scrollable.

#container {
  max-height: 200px;
}

5. Initialize the plugin and done

var $container = $('#container'),
    i = 1;

$container
  .on('reach.scrollbox', function () {
    if (i < 6) {
        // emulate XHR
        window.setTimeout(function () {
          $container.append('<div class="test-div">This is a test div #' + i ++ + '</div>');
          $container.scrollbox('update'); // recalculate bar height and position
        }, 300);
    }
  })
  .scrollbox({
    // position from bottom when reach.scrollbox will be triggered
    buffer: 150 
  });

6. Possible options to customize the scrollbar.

$('#container').scrollbox({
  
  // the distance from the left/right/top/bottom boundaries of the content when reachleft.scrollbox and reachright.scrollbox events should be triggered
  distanceToReach: {
    x: 0,
    y: 0
  },

  // the distance in pixels for one fixed step of mouse wheel
  wheelSensitivity: 20,

  momentum: {
    // swipe acceleration factor
    acceleration: 1600,
    // threshold time in milliseconds for detect inertial moving at swipe
    thresholdTime: 500
  },

  // initial position
  startAt: {
    x: Position.LEFT,
    y: Position.TOP
  },

  // custom template
  templates: {
    horizontalBar: '<div></div>',
    verticalBar: '<div></div>',
    horizontalRail: '<div></div>',
    verticalRail: '<div></div>',
    wrapper: '<div></div>'
  } 

});

7. API methods.

// update the scrollbar
$('#container').scrollbox('update');

// scroll by pixels
$('#container').scrollBy(deltaX, deltaY, jQueryAnimateOptions);

// scroll to a point
$('#container').scrollTo(x, y, jQueryAnimateOptions)

// destroy the scrollbar
$('#container').scrollbox('destroy');

8. Event handlers.

$('#container').on('reachleft.scrollbox', function () {
  // do something
});

$('#container').on('reachright.scrollbox', function () {
  // do something
});

$('#container').on('reachtop.scrollbox', function () {
  // do something
});

$('#container').on('reachbottom.scrollbox', function () {
  // do something
});

Changelog:

2020-10-07

• Update plugin
• Update documentation

---

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