Question

I’m having a beyond frustrating problem which I have no idea how to tackle.

My question: How do I determine how many elements exist between two positions in a viewport (a scrollable div in this occasion)?

Say I have a scrollable <div> that has a height of 150 px, but has a viewport at 450px with the majority of it being hidden. The div has children that are 30px high, 15 of them.

Question 2: How could I find out how many first children exist between n1 and n2, it seems pretty easy but it’s proving not to be.

I’ve created a jsFiddle where I have partly solved the solution, it works if the top value is set to 0, but it doesn’t work if it’s anything else. For example, with this solution I am able to determine that there are 7 visible divs between 0 and 200px. But if I change it to determine how many are between 30px and 230px it tells me 0, when again it should be 7.

Help please!

Answer 1

Try this instead:

var $this = $(this),
    topOffset = $this.offset().top;
if (topOffset >= top && topOffset <= bottom) {
    elements++;
}

This checks to see if the current element’s (in the each()) top offset is greater than the top variable’s value and increases the elements only then. This way, you don’t need to be constantly updating the height variable.

And this works, as you can see here.