Question

Is there a way I could hide all elements on a page whose bounding box is not completely visible.

I have list of table rows, where the containing element has a dynamic height, but with overflow hidden.

Sometimes half of an item in a list overlaps the containing element boundaries, and I was hoping either through CSS or JavaScript that I can hide these.

Hopefully, an image can explain this better. Here, I’d like to hide box 24.

One idea I have is to iterate over all elements, find its bounds, and check if they overlap the container bounds. This seems quite a heavyweight and messy way of doing it (especially as this is a scrolling list, and I’d have to calculate this every second). Is there a better way?

Thanks, and let me know if I need to clarify anything?

Update:

I’d like this to be generic and work with different markup structures, but for a simple example of the code I’m using (in this case, I guess only the first would be shown):

<style>
  #parent {height: 100px; overflow: hidden; }
  .child {height: 75px;}
</style>

<div id='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Answer 1

You could calculate the top offset + height and check if the resulting value is greater than the container height. If it does, that element and the rest of the items after it are beyond the bounds of the container.