Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darkseal/jquery.scrolling
adds the *scrollin* and *scrollout* events to jquery, which will fire when any given element becomes (respectively) visible and invisible in the browser viewpori
https://github.com/darkseal/jquery.scrolling
browser-viewport dom javascript jquery jquery-plugin scrolling
Last synced: 10 days ago
JSON representation
adds the *scrollin* and *scrollout* events to jquery, which will fire when any given element becomes (respectively) visible and invisible in the browser viewpori
- Host: GitHub
- URL: https://github.com/darkseal/jquery.scrolling
- Owner: Darkseal
- License: other
- Created: 2015-03-16T14:37:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-04-07T23:21:44.000Z (over 3 years ago)
- Last Synced: 2024-10-08T09:34:08.551Z (about 1 month ago)
- Topics: browser-viewport, dom, javascript, jquery, jquery-plugin, scrolling
- Language: JavaScript
- Size: 41 KB
- Stars: 6
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
README
# jQuery.scrolling
This plugin adds the *scrollin* and *scrollout* events to jquery: these events will fire when any given element becomes visible/invisible in the browser viewport, allowing you to:
- automatically or programmatically show/hide any HTML content as soon as it comes inside or outside the browser viewport (i.e. when the user scrolls to them).
- prevent unnecessary processing for content that is hidden or is outside of the browser viewport.
- trigger a custom function or behaviour (such as loading external AJAX content) when a certain point of the page is reached.
and more.
The plugin also supports *frame*, *iframe* and/or *dynamically-generated* content.
Requires jQuery 1.7 or above.
# Home Page
For the latest package, documentation, API and support please refer to the project Home Page.
# Installation
Installing the plugin is easy: all you need to do is download the latest version from the official project page (tar or zip): unpack the archive somewhere, copy the .js file in your website javascript folder and add the following line to the *head* block of your web page:
# Usage
Activate the plugin for one or more elements defined by a selector:
$('selector').scrolling();
Or for raw DOM nodes created using the standard jQuery syntax:
$('
content').scrolling();
Once activated, you can bind your code to the *scrollin* and *scrollout* events: they will trigger when the active element(s) will come inside the browser viewport.
$('selector').on('scrollin', function(event, $all_elements) {
// we reach this point as soon as the 'selector' element becomes visibile inside the browser viewport.
// $all_elements contains all the appeared elements.
});
$('yourselector').on('scrollout', function(event, $all_elements) {
// we reach this point as soon as the 'selector' element goes outside the browser viewport.
// $all_elements contains all the disappeared elements.
});
If you want to fire the *scrollIn* event for elements which are close to viewport but are not visible yet you may either:
- use the offsetTop and offsetLeft *options* properties during initialization.
- add the following custom data attributes *offset-top* and *offset-left* to DOM nodes.
$('#myEl').scrolling({ offsetTop: 100 });
// appear will be fired when "myEl" is 100 or less pixels
// below browser viewport
or
...
// same as above using data attributes.
Appear check can also be forced by calling *$.checkScrolling()*. This is suitable in cases when page is in initial state (not scrolled and not resized) and when you want manually trigger appearance check.
There's also a custom *scrollin* jQuery filter you can use for manual checking if the element is inside the viewport or not.
$('selector').is(':scrollin')
# Demo and Examples
Check the project demo page to see the most common implementation scenarios.
# Related links
- Project Home Page, where you can dowload the latest version.
- GitHub repository, where you can review the source code and/or fork it to your needs.
- jquery.scrolling official page on NPM.org, the node.js repository of most jQuery plugins.
- jquery.scrolling project page on the author website.
# Credits
This is a revamp/upgrade of the jquery.appear plugins respectively hosted on:
- http://code.google.com/p/jquery-appear/
- https://github.com/morr/jquery.appear
The original code has been rewritten and updated in order to support additional features, namely:
- IFrame support
- more options
- configurable values
- revised documentation
- additional samples
and more.
# Support
You can support this project's development by clicking on the following button.
[
](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYVYT76A3QEJ)
Thanks a lot!
# License
> Licensed under MIT license.
>
> Permission is hereby granted, free of charge, to any person
> obtaining a copy of this software and associated documentation
> files (the "Software"), to deal in the Software without
> restriction, including without limitation the rights to use,
> copy, modify, merge, publish, distribute, sublicense, and/or sell
> copies of the Software, and to permit persons to whom the
> Software is furnished to do so, subject to the following
> conditions:
>
> The above copyright notice and this permission notice shall be
> included in all copies or substantial portions of the Software.
>
> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
> HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
> WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
> FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
> OTHER DEALINGS IN THE SOFTWARE.