jQuery Scroll Out Of View

jQuery Scroll Out of view is a lightweight plugin for detecting if an element has been scrolled out of view and by how much. Run on an element, supply a wrapper element and an object will be returned. The object will have numerical values for top, bottom, left and right if the element has been scrolled out of the wrapper on those respective sides. Those numerical values represent by how many pixels the element is out of view on that side. If the element is completely in view the object will be empty.

When would this be useful?

Recently I had to position a div over a list item. That list item used overflow:scroll so as the list scroll the div had to move. If the list item became partially or completely scrolled out of view I had to resize or hide the div.

Demo

Scroll the list below:

  • item one
  • item two
  • item three
  • item four
  • item five
  • item six
  • item seven
  • item eight
  • item nine

Now run the following code example in your console

$('#viewport li').first().scrolledOut( $('#viewport') )
Fork me on GitHub