Question

I have an unordered list that is a child in a smaller parent div and is scrolled within the first div. How would I select the <li> that is currently visible within the first div’s window?

What I have tried is using the jQuery offset coordinates of the parent container and elementFromPoint which I got from here

xcoo = $('#menuholder1').offset().left;
ycoo = $('#menuholder1').offset().top;
clickedID = document.elementFromPoint(xcoo, ycoo).id;

However, this is returning the element one item higher. So I tried just adding to ycoo but then it returns nothing.

Does anyone have another solution to this? The page in question is http://do.right.by

Answer 1

I’ve used this plugin to select visible elements: http://archive.plugins.jquery.com/project/viewport

It adds the pseudo-selector :in-viewport, so you can select like this:

$("li:in-viewport")

To make it apply to a parent element rather than the window, get the modified source code here: https://gist.github.com/2979829

For the IIFE that looks like this

(function($, window) {
    //bunch of code...
})(jQuery, "#menuholder1");

#menuholder1 is the query that selects your parent element.