jQuery plugin that detects and
#jQuery-scrollBottom v1.7 - 23 December, 2012 jQuery plugin that detects and triggers a callback when the target's scrollbar have reached the bottom (or a certain bottom margin).
Typically used for endless pagination.In fact, this plugin was made to be used with rails-ajax-handler in order achieve endless pagination in 3 easy steps in a Rails App.
## Instalation You just need to include **jquery** and **jquery.scrollBottom.js** in your code, how you do it, is up to you. ```html <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="/assets/javascripts/jquery.scrollBottom.js" type="text/javascript"></script> ```
## Quick Example ```html ... lots of doctors that would make the #doctors_list go beyond the 200px of height. ... ``` ```javascript $("#doctors_list").scrollBottom(function() { alert("#doctors_list's scrollbar have reached the 100px near the bottom."); }, 100); ``` or ```javascript $(window).scrollBottom(function() { alert("window scrollbar have reached the bottom."); }); ```
## Methods
init
method
Initializes necessary data and bind events to the target.
ParamsName | Type | Default | Description |
---|---|---|---|
callback | function | undefined | Function with the code that you want to execute when the target's scrollbar reaches the bottom. |
options | int, Hash, undefined | 0 | If `options` is an int, it will defined the value of `margin_bottom` that in turn will define the height at which the scrollbar should fire the `callback`. |
options
is a Hash, here is what you can do with it
Name | Type | Default | Description |
---|---|---|---|
margin_bottom | int | 0 | Height (counting from the bottom up) at where the scrollbar should fire the `callback`. |
constant_check | boolean | false |
If false the `callback` will only fire once while the scrollbar is at or bellow the `margin_bottom`, unless the scrollbar goes up again.
If true the `callback` will fire everytime the target's 'scroll' event is triggered. |
$("#doctors_list").scrollBottom(function() { ... }, 50);
$("#doctors_list").scrollBottom(function() { ... }, { margin_bottom: 50, constant_check: true });
WARNING: This last example will trigger the callback
multiple times, due to the fact that it is binded to the scroll event of #doctors_list. This is why the default value of the constant_check option is set to false.
NOTE:
$("#doctors_list").scrollBottom(function() { ... });
//is the same as
$("#doctors_list").scrollBottom('init', function() { ... });
### `check_bottom` method ###
Checks if the target's scrollbar has reached the bottom (minus the `margin_bottom`) and triggers the `callback` set by the method `init`.
Params
Name | Type | Default | Description |
---|---|---|---|
bypass_validation | boolean, undefined | true | If the scrollbar is at or bellow the `margin_bottom` value and `bypass_validation` is false, the `callback` function will only be executed once (unless `constant_check` is true). |
$("#doctors_list").scrollBottom('check_bottom');
In case you need to manually check if the target's scrollbar is at the bottom and trigger your callback
.
### `destroy` method ### Removes all data and bind events attached to the target. Example
$("#doctors_list").scrollBottom('destroy');
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。