Show how to calculate if an element is on the screen

Makes use of getBoundingClientRect to calculate element parent intersections. Also includes handling for page scroll. Inspiration taken and extended from here: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling#answer-21627295

HTML

<div id="output"></div>
<div id="footer">Drag/scroll any of the rects, or scroll the window.</div>
<div class="target drag scrollable" id="red">
    <div class="target drag" id="green">
        <div class="target drag" id="orange">
        </div>
    </div>
    <div class="force-scroll"></div>
</div>
<div class="force-scroll"></div>

CSS

html, body { height: 100%; font-family: sans-serif; font-size: 0.95em; }

#footer {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

#output {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: yellow;
    z-index: 1;
}

#red {
    width: 500px;
    height: 300px;
    background: red;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    top: 40px;
    margin-left: 50px;
}

#green {
    width: 300px;
    height: 200px;
    background: green;
    position: relative;
    top: -100px;
    overflow: hidden;
}

#orange {
   width: 100px;
    height: 100px;
    background: orange;
    position: relative;
    top: 80px;
}

.force-scroll {
   height: 200%; width:1; visibility: hidden; 
}

JavaScript

/// simple rectangle intersection code, so we can work out what part remains visible
var intersect = function(r1, r2, bool) {
    if ( bool ) {
      return !(r2.left > r1.right || 
               r2.right < r1.left || 
               r2.top > r1.bottom ||
               r2.bottom < r1.top);
    }
    else {
        var r3 = {
            left: Math.max(r1.left, r2.left),
            top: Math.max(r1.top, r2.top),
            right: Math.min(r1.right, r2.right),
            bottom: Math.min(r1.bottom, r2.bottom)
        };
        r3.width = r3.right - r3.left;
        r3.height = r3.bottom - r3.top;
        return r3;
    }
}
/// simple function to handle full page scroll, when needed.
var scrollrect = function(r1){
    /// update what we know of the page scroll (this affects ClientRects())
    scrollrect.scrollx = window.pageXOffset || document.documentElement.scrollLeft;
    scrollrect.scrolly = window.pageYOffset || document.documentElement.scrollTop;
    /// all because getBoundingClientRect() returns a read-only object (it seems?)
    return {
        left: r1.left + scrollrect.scrollx,
        top: r1.top + scrollrect.scrolly,
        right: r1.right + scrollrect.scrollx,
        bottom: r1.bottom + scrollrect.scrolly,
        width: r1.width,
        height: r1.height
    };
}
/// add in a jQuery pseudo selector :onscreen, which calculates screen presence
/// based on getBoundingClientRect() and the full page scroll.
$.extend(
  $.expr[':'],
  {
    /// check that an element is actually visible on the screen
    'onscreen': function (el, indx, args) {
      var $el, ov, r1, r2;
      r1 = el.getBoundingClientRect();
      el = el.parentNode;
      $el = $(el);
      /// this should loop back all the way to <body>, ignoring <html>
      do {
          /// handle different states of overflow
          ov = $el.css('overflow') || $el.css('overflow-x') + ':' + $el.css('overflow-y');
          /// special overflow for body
          if ( $el.is('body') ) { ov...