JS. Detect hidden child with parent overflow:hidden

Question

I'm looking for simple way to detect, if child element of parent with overflow:hidden is visible within parent (it's not hidden by overflow).

I found something like this:

http://www.useallfive.com/thoughts/javascript-tool-detect-if-a-dom-element-is-truly-visible/

but i wonder maybe there is simpler solution.

Thanks in advance!

'simpler' is sort of vague. What do you not like about the solution you linked to? — jessegavin, Mar 16 '17 at 19:00
I believe this post will help you: http://stackoverflow.com/questions/17226000/check-if-element-is-visible-in-div — iamjpg, Mar 16 '17 at 19:17

score 5 · Answer 1 · edited Sep 22 '17 at 03:35

Assuming you want a vanilla js solution, try this:

function isVisible (parent, child) {
  return !(
    (child.offsetLeft - parent.offsetLeft > parent.offsetWidth) ||
    (child.offsetTop - parent.offsetTop > parent.offsetHeight)
  )
}

Basically "if the difference between the start of the parent element and the start of the child element is greater than the actual width or height of the parent, it's considered not visible"

Run the following snippet for an example:

var parent = document.getElementById('parent');

[].slice.call(document.querySelectorAll('.child')).forEach(function (child, i) {
  console.log(i + ' is visible?', isVisible(parent, child));
});

function isVisible(parent, child) {
  return !(
    (child.offsetLeft - parent.offsetLeft > parent.offsetWidth) ||
    (child.offsetTop - parent.offsetLeft > parent.offsetHeight)
  )
}

* {
  box-sizing: border-box;
}

#parent {
  width: 200px;
  height: 100px;
  white-space: nowrap;
  background: lightblue;
}

.child {
  display: inline-block;
  width: 75px;
  height: 100%;
  border: 1px solid green;
}

<div id="parent">
  <div class="child">0</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

This solution worked for me, at least for vertical overflow! — Ahmed Musallam, Sep 22 '17 at 03:36
Couldn't this be messed up if the parent is contained in a positioned element and is also a positioned element itself? Since offsetLeft and offsetTop are relative to the nearest positioned ancestor, the child's values would be relative to the parent's and the parent's to it's own positioned ancestor? — Cully, May 21 '21 at 20:39
Also, what if the child is offset to the left of the parent? — Cully, May 21 '21 at 20:48

score 0 · Answer 2 · answered Mar 16 '17 at 19:04

You can do the following things:

check if the element has height and width that are bigger than 0px
check if the element display CSS property is not "none", preferably "block"
check if the element positioning is valid and if so, check if it´s "top" property is not bigger than the parent´s height
Same thing for left - if it is not bigger than parent´s width

When checking "width", check offsetWidth and clientWidth, those will show actual numbers as displayed to the client.

score 0 · Answer 3 · answered Dec 14 '18 at 18:06

I had a similar requirement, but mine was a bit more complicated because the overflow: hidden element wasn't the first parent, it was like 5 or 6 elements away.

Just spend a whole day trying to do it with solutions from the internet(I've tried the repo you mentioned as well), but nothing worked.

So I've made this repo by myself (only JS, 2kb sized) https://github.com/LuizAsFight/is-element-visible.

It might help you, basically I just get the target element and climb the tree searching if any parent has a overflow:hidden, once I found it I get the parent's rect size, and check if the target element rect is inside the parent (visually, pixels)

for using it you just need to

import isVisible from 'is-element-visible';

const el = document.getElementById('id');
isVisible(el);

I hope it helps you, Best.

JS. Detect hidden child with parent overflow:hidden

3 Answers3