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:

/

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!

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./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!

• javascript
• jquery
• html
• html-parsing

• 1 One solution would be to calculate with scroll position, box dimensions, ... – Šime Vidas Commented Jan 4, 2011 at 23:54
• 1 You could use real, accessible scrollbars and just use scrollIntoView to bring an item in when appropriate. As for determining which is focused, latch that as a variable and navigate your DOM to find which is the next/previous. – Phrogz Commented Jan 5, 2011 at 0:05

3 Answers 3

You can determine the offset of each div from the top of the scrollable area and then pare 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.

Since you're using jquery take a look at the position() function http://api.jquery./position/

You can use it to check the position of the selected element relative to the surrounding container.

Example

<!DOCTYPE html>
<html>
<head>
  <style>

  div { height: 3px;
      overflow: auto;
      padding: 10px;}
  p { margin-left:10px; }
  </style>
  <script src="http://code.jquery./jquery-1.4.4.js"></script>
</head>
<body>

<div id="container">
  <p>Hello</p>
</div>
<p></p>

<script>
$(document).ready(function(){
    $("#container").scroll(function(ev){
        var p = $("p:first");
        var position = p.position();
        $("p:last").text( "left: " + position.left + ", top: " + position.top );
    });
});
</script>

</body>
</html>

If the code looks familiar, its cuz I stole most of it from the .position page :).

You can see it in action here http://jsfiddle/ehudokai/HBhRL/5/, try scrolling over the word 'Hello'.

You can use the fact that the top value changes as the element moves through the parent to see if its close to the viewable portion.

Hope that helps!

I use jquery appear plugin for this.. it works like magic.. :)

$(document).ready(function() {
    $('#wallbottom').appear(function() {
        alert("div appeared");
    });
});

code.google./p/jquery-appear/