#check on screen

[worldtrendings]

Young Thug – Check On Screen Lyrics

[jessicaxtina]

Ai a mina quer fumar haxixe ♪

[notonlycode-blog]

when on SCREEN; do something.!!

As a web developer the most common usecase we tend to have is doing something when an element is actually visible on screen. Some examples are like when the image element is visible then only load it, or when you reach last element on the page then trigger the request for next set.

I could develop a simple utility for that -whenOnScreen using the getBoundingClientRect function that we have as part of W3C standard. Now this function is pretty cool; it will return you an object which has the dimension and the position of the element as if it were absolutely positioned from the window.

But webpages generally have scrollable divs instead of page scroll (more evident now in single page apps). So we have to take care of the case that even if the element is present absolutely from screen, it may be hidden behind the parent container. This plugin handles that by first checking the visibility of the parent and then that of element relative to the parent.

The plugin works well on both mobile and desktop. For both it uses different event to identify scrolling behaviour. Also one can use it both as normal standalone utility and as jquery plugin.