jQuery Plugin For Handling Scrollin And Scrollout Events - scrolling.js

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.