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

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:

 

Usage

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

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

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.

There's also a custom scrollin jQuery filter you can use for manual checking if the element is inside the viewport or not.

 

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.

 

Related links

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.