A Simple and Easy Custom Scrollbar jQuery Plugin | Scrollbox

Scrollbox is a lightweight jQuery custom scrollbar plugin that triggers an event when the specified point is reached.

Beautiful Scrollbar Customizer for Bootstrap and HTML5 Pages | scrollboss.js

How to make use of it:

1. Include the scroll box plugin and different required assets on your web 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 model 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 complete it.

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

  .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('up<a href="%!">date</a>'); // recalculate bar height and position
        }, 300);
    // position from bottom when reach.scrollbox will be triggered
    buffer: 150 

6. Possible choices to customize the scrollbar.

  // 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 strategies.

// update the scrollbar

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

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

// destroy the scrollbar

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

jQuery Plugin For Custom Scrollbar, Scrollbox Plugin/Github, jquery custom scrollbar demo, custom scrollbar jquery, custom scrollbar jquery for all browsers

See Demo And Download

Official Website(Invis1ble): Click Here

This superior jQuery/javascript plugin is developed by Invis1ble. For extra Advanced Usage, please go to the official website.

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…

Leave a Reply

Your email address will not be published. Required fields are marked *