Jquery.scrolling: check HTML elements visibility in Viewport after a page scroll or resize

Ryan

10 years ago

Jquery.scrolling: check HTML elements visibility in Viewport after a page scroll or resize

With responsive design and adaptive layouts constantly increasing their audience, the importance of controlling the visibility of HTML elements inside the viewport is continuosly increasing. Unfortunately, neither javascript nor the popular jquery frameworks provide a native way to check the visibility status of an element after a page scroll or resize.

This is the main reason behind the development of jquery.scrolling, a jQuery plugin that does exactly this: it basically adds the scrollin and scrollout custom events that will fire when any given element becomes visible/invisible in the browser viewport. This allows 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.

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 headblock of your web page:

<script type="text/javascript" src="/yourpath/jquery.scrolling.js"></script>

1	<script type="text/javascript" src="/yourpath/jquery.scrolling.js"></script>

Usage

First time you need to do is to activate the plugin for one or more elements defined by a selector:

 $('selector').scrolling();

1	$('selector').scrolling();

Or for raw DOM nodes created using the standard jQuery syntax:

$('<div>content</div>').scrolling();

1	$('<div>content</div>').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.
    });

$('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.

});

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')

1	$('selector').is(':scrollin')

Demo and examples

The plugin also supports many advanced features such as:

context configuration to activate elements inside a frame or iframe.
positive or negative offset settings to fire the event(s) before or after the element's appearance inside the viewport.

and much more.

Check the project demo page to see the most common implementation scenarios.

Installation

Usage

Demo and examples

Related links