Discuss
  • Finding elements that are hidden due to overflow: hidden

Finding elements that are hidden due to overflow: hidden

# Behrang Saeedzadeh (9 years ago)

Looks like at the moment DOM does not expose any properties that signify whether an element has become hidden due to an *overflow: hidden *on their parent element.

Any chance of adding this feature to DOM?

# Tab Atkins Jr. (9 years ago)

On Tue, Aug 25, 2015 at 6:39 PM, Behrang Saeedzadeh <behrangsa at gmail.com> wrote:

Looks like at the moment DOM does not expose any properties that signify whether an element has become hidden due to an overflow: hidden on their parent element.

Any chance of adding this feature to DOM?

That's a result of CSS layout/rendering; it doesn't seem super-appropriate to add to the DOM. It's also a bit troublesome; an element can be partially hidden, so when does this flag flip to true? It's also very specific; there are a ton of ways that an element can get hidden besides being clipped by an overflow:hidden ancestor. What's the actual use-case you're trying to address here?

# Behrang Saeedzadeh (9 years ago)

My use case can already be implemented using JavaScript and some existing properties on elements such as clientLeft and its cousins.

Here's a simplified version of my use case: codepen.io/behrangsa/pen/PPozWj

But I thought it would be nicer if an element had a method that could be used in such cases.

Regarding what to do with partially visible elements, rather than returning true/false, the method/property -- for example visibleRect -- can return the dimensions of the visible part of the element (e.g. x: 0, y: 0, w: 20, h:10) or (0,0,0,0) if it is not visible at all.

I am not sure if this is technically feasible or not. But AFAIK some games use various algorithms to determine the visibility of an object in a 3D space. Or if a bullet fired in a direction will hit a given object or it will get blocked by an obstacle in front of it. So it seemed to me it probably should be feasible in HTML/CSS as well.

# Tab Atkins Jr. (9 years ago)

On Thu, Sep 3, 2015 at 3:26 AM, Behrang Saeedzadeh <behrangsa at gmail.com> wrote:

Hi Tab,

My use case can already be implemented using JavaScript and some existing properties on elements such as clientLeft and its cousins.

Here's a simplified version of my use case: codepen.io/behrangsa/pen/PPozWj

That shows some example code, but I'm not sure what you're trying to do with it. I guess you want to know if some of the options are overflowing the container? What are you trying to accomplish with that? What user-facing styling need are you attempting to address?

I am not sure if this is technically feasible or not. But AFAIK some games use various algorithms to determine the visibility of an object in a 3D space. Or if a bullet fired in a direction will hit a given object or it will get blocked by an obstacle in front of it. So it seemed to me it probably should be feasible in HTML/CSS as well.

"Feasible" and "sufficiently worthwhile to add to the web platform" are, of course, two vastly different things. ^_^

# Behrang Saeedzadeh (9 years ago)

Actually I just realized that even getVisibleRect is not generic enough as multiple sections of an element could become hidden. So we will going to need getVisibleRects.