How to check if an element is overlapping other elements? [duplicate]

StackOverflow https://stackoverflow.com/questions/12066870

  •  27-06-2021
  •  | 
  •  

Question

I have two div elements. Each of them have 450px width and height. How do I check if the first div is overlapping the second div?

I've tried to use javascript hittest, but it's a little bit complicated. Since I'm trying to find out how it actually work, I would like to get started with a simpler code.

I found out that I can use .getClientRects to get the boundary of an element, but I'm not exactly sure how to compare boundaries.

Please advise me!

Was it helpful?

Solution

Something like this for rect1 and rect2 retrieved via getBoundingClientRect():

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

Explain: if one or more expressions in the parenthese are true, there's no overlapping. If all are false, there must be an overlapping.

OTHER TIPS

Here's something I made some days ago: https://gist.github.com/yckart/7177551

var AABB = {
  collide: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },

  inside: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
};

element.getBoundingClientRect() is quiet good in modern browsers, delivers a bounding relative to the screen. look here Than test if the bounding boxes overlap, that is simple geometry...

oh excuse me... found your edit too late...

In Internet Explorer earlier than version 8, the returned TextRectangle object contains the coordinates in physical pixel size, while from version 8, it contains the coordinates in logical pixel size.

If you need the bounding rectangle of the entire element, use the getBoundingClientRect method.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top