Javascript/AJAX element-shown event

Question

In javascript is it possible to trigger an action when a element (for example a div) is shown in the screen?

I have an "endless" grid that extends both horizontally and vertically, and I would like to load the elements dynamically using AJAX while the user scrolls.

Thanks

Answer 1

you can check if the scrollbar is near the end with something like this (i assume you're using jquery):

$('#my-container').scroll(function(e) {
  var tolerance = 0;    
  var $el = $(this);
  if ($el[0].scrollTop + $el.height() >= $el[0].scrollHeight - tolerance) {
   // do your ajax stuff
  }
});

EDIT: you can check if an element is in the viewport with viewport plugin (or better, you can apply the same logic used there to any container other than window)

Answer 2

You can use document.body.scrollTop and document.body.scrollLeft to know the position of the scroll.

P.S: gpilotino was faster and actually posted some useful code