jQuery Plugin For Handling Scrollin And Scrollout Events - scrolling.js
File Size: | 9.31 KB |
---|---|
Views Total: | 372 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

scrolling.js is a tiny and cross-browser jQuery plugin that lets you perform actions on elements when they enter or exit the viewport.
The plugin provides 2 additional events "scrollin" and "scrollout" to which you can attach custom event handlers depending on the position of the element.
Use Cases:
- Animate elements when they're scrolled into view.
- Delay the loading of iframe or AJAX content until visible in the viewport.
How to use it:
1. Insert both jQuery library and the scrolling.js
into the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.scrolling.js"></script>
2. Initialize the plugin on the target element.
<div class="example"> Animate Me! </div>
$('.example').scrolling({ // options here });
3. Fire the "scrollin" and "scrollout" events as soon as the element enter/exit the viewport.
$('.example').on('scrollin', function(event, $all_elements) { console.log("scrollin"); }); $('.example').on('scrollout', function(event, $all_elements) { console.log("scrollout"); });
4. Set the top/left offsets of the element. Default: 0.
<div class="example" data-offset-top="100" data-offset-top="100"> Animate Me! </div>
// Or via JavaScript $('.example').scrolling({ offsetTop: 100, offsetLeft: 100 });
5. Determine whether to perform an element "scroll-in" check immediately after startup. Default: false.
$('.example').scrolling({ checkScrolling: true });
6. Set how often the plugin detects the scroll position of the element. Default: 250.
$('.example').scrolling({ interval: 500 });
7. Set a custom window object. Default: null (use the current window). Pass "top" to use the topmost frame.
$('.example').scrolling({ window: null });
This awesome jQuery plugin is developed by Darkseal. For more Advanced Usages, please check the demo page or visit the official website.