Scrollable Div, which elements can be seen

Question

We have a scrollable div that has CSS hieght:40px;. Inside it are multiple LI height:20px

    



        
                      

              相关标签:
       
      

Answer 1

I'd have thought the best way to do it is in your scroll event capture the scrollTop value of the div and compare it to the top of each li element (maybe add the height so you can see if the element is completely out of view).

Answer 2

jQuery's position method gets the position relative to the container, and you can get the top position by doing $("li").position().top;

So my solution was to write a loop to go through all the elements and find the one with the smallest value for position().top and pick that out. Here's the script I wrote:

$(function() {

    var mostVisibleItem = $("li:first");

    var smallestOffset = mostVisibleItem.position().top;
    $("li").each(function(i, item) {
        if($(item).position().top < smallestOffset)
        {
            smallestOffset = $(item).position().top;
            mostVisibleItem = $(item);
        }
    });
    mostVisibleItem.css("color", "red");
});

You can see this working in JSFiddle here: http://jsfiddle.net/P69y2/

Hope this helps :)

Answer 3

Update

Updated with a working example http://jsfiddle.net/U4qyp/32/

---

I think .position() should do the job. It gives you the position of the element relative to its parent element. After you called .position() you can access the element coordinates using the properties top and left.

http://api.jquery.com/position/

The element whose top position plus its height is major than zero, is visible.

Here is an example of what I mean.

http://jsfiddle.net/U4qyp/10/

Answer 4

Something like this would work, where you would replace the console.log with your display logic.

<script>
    $(function() {
        $('#scroller').scroll(function() {
            $('#scroller li').each(function() {
                if ($(this).position().top > 0) {
                    console.log($(this).html());
                    return false;  // break once the first displayable value has been returned.
                }   
            })
        })
    })
</script>