How to determine which element(s) are visible in an overflowed <div>

Question

Basically, I'm trying to implement a system that behaves similar to the reading pane that's built into the Google Reader interface.

If you haven't seen it, Google Reader presents each article in a separate box and as you scroll it highlights the current box (and marks the article as read). In addition to this, you can move forward or backward in the article list by clicking the previous and next buttons in the UI.

I've basically figured out how to do most of the functionality. However, I'm not sure how I can determine which of my divs is currently visible in in the scrollable pane.

I have a div that is set to overflow:auto. Inside of this div, there are other divs, each one containing a piece of content. I've used the following jquery plugin to make everything scroll based on a click of the "next" or "previous" button and it works like a charm:

http://demos.flesler.com/jquery/serialScroll/

But I can't tell which div has "focus" in the scrollable pane. I'd like to be able to do this for two reasons.

1. I'd like to highlight the item that the user is currently reading (similar to Google Reader). I need to do this regardless of whether or not they used the plugin to get there or used the browser's scroll bar.

2. I need to be able to tell the plugin which item has focus so that my call to scroll to the "next" pane actually uses the currently viewed pane (and not just the previous pane that the plugin scrolled from).

I've tried doing some searching but I can't seem to figure out a way to do this. I found lots of ways to scroll to a particular item, but I can't find a way to determine which element is visible in an overflowed div. If I can determine which items are visible, I can (probably) figure out the rest.

I'm using jquery if that helps. Thanks!

Answer 1

You can determine the offset of each div from the top of the scrollable area and then compare that to the amount the scrollable area has been scrolled.

$('#scrollableDiv').scroll(function() {
    var areaHeight = $(this).height();

    $('.innerDiv').each(function() {
        var top = $(this).position().top;
        var height = $(this).height();

        if (top + height < 0)
            console.log('this div is obfuscated above the viewable area');
        else if (top > areaHeight)
            console.log('this div is obfuscated below the viewable area')
        else
            console.log('this div is at least partially in view');
    });
});

If more that one div is in view then I would select the one with the least offset variable value, since this will be the first (or highest) one.