How to get content currently being displayed in browser viewport

Question

How can I get an indication of what part of a long document is currently being displayed?

E.g. if my html contains 1,000 lines
1
2
3
...
999
1000

and the user is near the middle showing the 500th line then I would like to get "500\n501\n502" or something like that.

Obviously most scenarios would be more complex than this, but my requirement is to find which text is currently being displayed in the browser viewport so I can show a status value appropriate to the current text.

Thanks Martin

Answer 1

If you have jQuery, you can use this function to check if a DOM element is currently shown in the viewport:

function isInView(elem) {

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

Answer 2

You can get a value in pixels from the scrollTop property:

document.body.scrollTop = 40;

To know what part of your document that is visible, you could loop through (say) all p-tags until you find one with a negative scrollTop value. The one before that is the one at the top of the window.

Answer 3

I've just seen a piece of sample code on msdn

function isinView(oObject)
{
   var oParent = oObject.offsetParent; 
   var iOffsetTop = oObject.offsetTop;
   var iClientHeight = oParent.clientHeight;
   if (iOffsetTop > iClientHeight) {
     alert("Special Text not in view. Expand Window to put Text in View.");
   }
   else{
      alert("Special Text in View!");
   }
}