Question

I’d like to know how could I get only the displayed controls in the screen in the very moment.

For example:

If I have a scrollbar which precludes the user from seeing everything
below the page, I’d like to make a selector which selects only what the user can see in his screen now. It would also be nice If I could select everything he does not see.

Is that possible? How?

Thanks

Answer 1

You could calculate the offsets (say, as the user scrolls) of what the user can see:

var top = $(window).scrollTop();
var bottom = top + $(window).height();

Then, you can see if an element is within this range.

$('*').each( function() {
  var el = $(this);
  var offsetTop = el.offset().top;
  var inView = offsetTop >= top && offsetTop <= bottom;
  el.addClass( inView ? 'in-view' : 'out-of-view' );
} );

Obviously there are some downsides performance wise to doing this. Depending what you want to do with this information you could select only inputs or whatever which might help.