Javascript: how can I judge an element is in viewport?

Question

I have a <ul> element. It's CSS overflow property is scroll.
I have several list elements in the list, such that there is a scrollbar.

<ul style="overflow: scroll; height: 100px;">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   ...
   <li></li> // how can I judge if this element is in the viewport?
</ul>

How can I determine if a specific list item is visible in that list?

Also, if it's not currently visible, what property can I use to make it scroll into view?

PS: No libraries, please (jQuery, MooTools, etc).

jQuery is pure JavaScript. It has to be, because it's executed as JavaScript. I think better wording is in order, lol. As for an answer, I'll research a little for you. — Joe Simmons, Nov 03 '13 at 09:22
@JoeSimmons, does this match the wording you want: "No external JavaScript libraries." — Paul Draper, Nov 03 '13 at 09:25

score 0 · Answer 1 · answered Nov 03 '13 at 11:14

This is a function I just came up with.

I did some testing on the jsFiddle link at the end of this answer, and it seems consistent.

function elementInViewOfParent(elem) {
    var container = elem.parentNode;
    return (container.scrollTop + container.offsetHeight) >= elem.offsetTop &&
           (container.scrollTop - elem.offsetHeight) <= elem.offsetTop;
}

jsFiddle example - Just scroll it wherever you want, and click the button.
It checks for the red LI's visiblity, in this example.

score -1 · Answer 2 · edited May 23 '17 at 12:03

-1

If you are okay with using jQuery, this will scroll so that elem is visible and at the top.

function scrollTo(elem) {
    var offset = $(elem).offset();
    $(window).scrollTop(offset.top);
}

(You could even animate the scroll: jQuery scroll to element).

Another solution would be to use <a target="foo"></a>, and the change the URL fragment to scroll to a particular element, but you specifically asked to be able to tell from JavaScript, which this does not allow you to do.

edited May 23 '17 at 12:03

Community

1
1

answered Nov 03 '13 at 09:11

Paul Draper

64,883
37
172
246

Well, jQeury's `offset` is nontrivial, but I believe you will have to rewrite it (or carefully copy and paste) to get what you want. – Paul Draper Nov 03 '13 at 09:24

Javascript: how can I judge an element is in viewport?

2 Answers2