jQuery Plugin For Custom Scrollbar - scrollbox

jQuery Plugin For Custom Scrollbar - scrollbox
File Size: 5.78KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

How to use it:

1. Include jQuery library and scrollbox.js on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.scrollbox.js" type="text/javascript"></script>

2. Include scrollbox CSS to style your plugin

<link href="jquery.scrollbox.css" media="screen" rel="stylesheet" type="text/css" />

3. Markup

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

4. The CSS

#container {
max-height: 200px;
}

5. Javascript

<script type="text/javascript">
$(function () {
    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({
            buffer: 150 // position from bottom when reach.scrollbox will be triggered
        });
});
</script>

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