12

As of February 2013, speaking of all that brand new, top-notch APIs (including experimental and even crazy ones), can you provide how one should detect whether specific DOM node is currently in viewport or not.

Cross-browserness is a plus. Flexibility and and universalism are even greater pluses.

So, basically I need something like is_in_viewport(dom_node) which returns Boolean.

Some Clarification. Let us by visibility mean that at least a single pixel of the element is physically visible in the viewport (which is not necessarily window).

By classic approaches I mean:

  • measuring element's dimension and position using such properties as offsetTop, offsetLeft etc.
  • using getBoundingClientRect

So, to put it simple, I'm looking for some kind of API that hides from me the level of abstraction which deals with direct measurements and subsequent computations.

shabunc
  • 23,119
  • 19
  • 77
  • 102
  • What have you researched so far? – Aaron Kurtzhals Feb 06 '13 at 15:54
  • https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect – lonesomeday Feb 06 '13 at 15:55
  • @AaronKurtzhals, I know about all approaches that can be called classical, know pretty well their limitations and drawbacks. I've researched this issue pretty intensively but failed to find something really new (as, say Visibility API for pages). That is why I'm asking about it. Definitely see no reason to downvote this question. – shabunc Feb 06 '13 at 15:57
  • 2
    I'm going to +1 this just because I think it's a decent question. But really, I think there does need to be some clarification as to what is meant by visibility. Obviously, there's the distinction between whether or not it's a child has style `display: none` or `visibility: hidden` or a zero opacity. But then, you mention "in the viewport", there are also things like whether or not it's positioned within the viewport, or even where it's transformed to where it's outside of the viewport or that it's so small it's hardly distinguishable. – JayC Feb 06 '13 at 16:03
  • 1
    @shabunc I did not downvote the question :) I think it would be helpful to people if you linked to some existing/old techniques. It would also help to clarify what you are not looking for. – Aaron Kurtzhals Feb 06 '13 at 16:03
  • @JayC, got your point, now will try to edit the question in order to make it more clear. – shabunc Feb 06 '13 at 16:05
  • Used this answer before: [LINK](http://stackoverflow.com/a/1542908/834178) – Paul Hoenecke Feb 11 '13 at 06:20
  • @PaulHoenecke, the link you've provided is awesome, but it deals with direct measurements. – shabunc Feb 11 '13 at 10:17
  • I wouldn't risk posting this as an answer yet, but isn't this something that jQuery can do for quite a while already? I remember that they put a lot of effort into that. And you can use that code, just dig it out. – naugtur Feb 14 '13 at 21:47
  • @naugtur, we can wrap and therefore hide all the measurements, but at the end of it all we cave is pure DOM element measure characteristics. The question is about browser-powered API, so you have no need to measure anything at all. – shabunc Feb 15 '13 at 11:09

0 Answers0