How to check if an element is overlapping other elements?

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!

http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection can you see if this helps you out. — user1071979, Aug 22 '12 at 05:44
So what you're asking is that given an array of bounding rectangles, how do you determine which ones overlap? — Blender, Aug 22 '12 at 05:45
Just curious why it marked as duplicated since there is no jQuery reference in OP. — Miraage, Mar 20 '18 at 12:52

score 138 · Accepted Answer · answered Aug 22 '12 at 05:54

138

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.

answered Aug 22 '12 at 05:54

Buu

49,745
5
67
85

1

Just figured out that this only works if both elements are currently visible - a shame! – graygilmore Feb 07 '14 at 20:04
1

Would switching the logic to use `&&` give a tiny performance boost on occasions when they don't overlap? – Brook Jordan Jul 25 '17 at 05:19
Removing the negation and turning the checks around makes the code faster & easier to reason about. Also, with the current check the edges are allowed to touch instead of overlapping. The difference between `<` & `<=`. – Guido Bouman Apr 18 '18 at 11:45
in firefox with 2 fixed elements is not working – manuel-84 Feb 01 '19 at 14:01
what if some elements are rotated? this method does not work for rotated elements. any new idea!? – Msd.Abd Oct 20 '22 at 11:03

yckart · Answer 2 · 2014-08-06T00:50:53.857

20

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))
    );
  }
};

edited Aug 06 '14 at 00:50

answered Oct 27 '13 at 03:05

yckart

32,460
9
122
129

3

Inside can be simplified to: `rect1.top <= rect2.bottom && rect1.bottom >= rect2.top && rect1.left <= rect2.right && rect1.right >= rect2.left` – Brook Jordan Jul 25 '17 at 05:16
but what about those elements are rotated ? refer link http://jsfiddle.net/zch7uLr3/3/ I m facing issue in rotated elements – user3731362 Jun 22 '23 at 14:19

score 1 · Answer 3 · answered Aug 22 '12 at 05:40

1

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...

answered Aug 22 '12 at 05:40

philipp

15,947
15
61
106

What about if element is rotated ? how can we find out that rotated element/div not overlapping with another element/div ? refer link :- https://stackoverflow.com/questions/76505905/how-verify-rotated-div-is-overllapping-with-another-div – user3731362 Jun 20 '23 at 09:39

score 1 · Answer 4 · answered Aug 22 '12 at 05:51

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.

How to check if an element is overlapping other elements?

4 Answers4

Linked

Related