Most efficient way to determine if an HTML element is in the viewport?

Question

I'm currently using prototype, with some code like:

function in_viewport(foo) {
  var offset = foo.viewportOffset().top;
  var viewportHeight = document.viewport.getHeight();
  if (offset > (0 - foo.getHeight()) && offset < viewportHeight) {
    return true;
  } else {
    return false;
  }
}

Is there a faster/easier/more-efficient/better way of doing this?

Answer 1

With various JavaScript libraries like Dojo you can get pretty specific and cross browser compatible code that you can use to do this. It still wont look much prettier than what you have there. If you're doing it from scratch it gets much more complex as you have browser quirks, browser version quirks, have to deal with scrolling, etc.