jquery.scrollWatch

Triggers events on various page elements as they are scrolled in to and out of view.

Usage

Bind events using the .on() method:

// Pseudo-JavaScript
$('#element').scrollWatch(options).on(eventName, callback, thisArg);

// Example
$('#element').scrollWatch().on('scroll', function(event) {
    console.log(event.visibility)
});

Methods

• on(eventName, callback, [thisArg]) - Binds an event

Events

• scrollin (event) — Triggered once, when the element is fully visible in the viewport.
• scrollout (event) — Triggered once, when the none of the element is visible. Only triggers if scrollin has been called on the element.
• scroll (event) — Triggered many times, every scroll event when the element is partially or fully visible.

Event object

event.direction

A string that is either 'up' or 'down' indicating which direction the user is scrolling.

event.originalEvent

The original jQuery Event object.

event.visibility

A percent of the element that is visible, only useful for the scroll event.

• Between 0 and -1 when the top of the element is bleeding out of view.
• Between 0 and 1 when the bottom of the element is bleeding out of view.
• Is 1 on the scrollin event
• Is 0 on the scrollout event

NOTE: Elements that are taller than the viewport would technically never have 100% visibility. However, visibility will jump to 1 when both the top and bottom of the element are bleeding off the screen (effectively the element is taking up the entire vertical viewport space).

Options

$('#element').scrollWatch(options)

• watchOn - The scrollable element to watch on. Can be a selector, DOM node or jQuery object. When using a custom element, it should have overflow: scroll. Defaults to window.