This time I will share jQuery Plugin and tutorial about jQuery Plugin For Custom Scrollbar – scrollbox, hope it will help you in programming stack.
| File Size: | 82.4 KB |
|---|---|
| Views Total: | 5704 |
| 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 events when reached the defined point.
How to use it:
1. Include the scrollbox plugin and other required resources on your page.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/cdn/jquery.mousewheel.min.js"></script> |
3 |
<script src="/path/to/dist/js/scrollbox.min.js"></script> |
2. Include scrollbox CSS to style your plugin.
1 |
<link href="/path/to/dist/css/scrollbox.min.css" rel="stylesheet" /> |
3. The HTML markup.
1 |
<div id="container"> [CONTENT] </div> |
4. Make the container scrollable.
1 |
#container { |
2 |
max-height: 200px; |
3 |
} |
5. Initialize the plugin and done
01 |
var $container = $('#container'), |
02 |
i = 1; |
03 |
04 |
$container |
05 |
.on('reach.scrollbox', function () { |
06 |
if (i < 6) { |
07 |
// emulate XHR |
08 |
window.setTimeout(function () { |
09 |
$container.append('<div class="test-div">This is a test div #' + i ++ + '</div>'); |
10 |
$container.scrollbox('up<a href="https://www.jqueryscript.net/time-clock/">date</a>'); // recalculate bar height and position |
11 |
}, 300); |
12 |
} |
13 |
}) |
14 |
.scrollbox({ |
15 |
// position from bottom when reach.scrollbox will be triggered |
16 |
buffer: 150 |
17 |
}); |
6. Possible options to customize the scrollbar.
01 |
$('#container').scrollbox({ |
02 |
|
03 |
// the distance from the left/right/top/bottom boundaries of the content when reachleft.scrollbox and reachright.scrollbox events should be triggered |
04 |
distanceToReach: { |
05 |
x: 0, |
06 |
y: 0 |
07 |
}, |
08 |
09 |
// the distance in pixels for one fixed step of mouse wheel |
10 |
wheelSensitivity: 20, |
11 |
12 |
momentum: { |
13 |
// swipe acceleration factor |
14 |
acceleration: 1600, |
15 |
// threshold time in milliseconds for detect inertial moving at swipe |
16 |
thresholdTime: 500 |
17 |
}, |
18 |
19 |
// initial position |
20 |
startAt: { |
21 |
x: Position.LEFT, |
22 |
y: Position.TOP |
23 |
}, |
24 |
25 |
// custom template |
26 |
templates: { |
27 |
horizontalBar: '<div></div>', |
28 |
verticalBar: '<div></div>', |
29 |
horizontalRail: '<div></div>', |
30 |
verticalRail: '<div></div>', |
31 |
wrapper: '<div></div>' |
32 |
} |
33 |
34 |
}); |
7. API methods.
01 |
// update the scrollbar |
02 |
$('#container').scrollbox('update'); |
03 |
04 |
// scroll by pixels |
05 |
$('#container').scrollBy(deltaX, deltaY, jQueryAnimateOptions); |
06 |
07 |
// scroll to a point |
08 |
$('#container').scrollTo(x, y, jQueryAnimateOptions) |
09 |
10 |
// destroy the scrollbar |
11 |
$('#container').scrollbox('destroy'); |
8. Event handlers.
01 |
$('#container').on('reachleft.scrollbox', function () { |
02 |
// do something |
03 |
}); |
04 |
05 |
$('#container').on('reachright.scrollbox', function () { |
06 |
// do something |
07 |
}); |
08 |
09 |
$('#container').on('reachtop.scrollbox', function () { |
10 |
// do something |
11 |
}); |
12 |
13 |
$('#container').on('reachbottom.scrollbox', function () { |
14 |
// do something |
15 |
}); |
Changelog:
2020-10-07
- Update plugin
- Update documentation
