Checking overlap between elements

Use this snippet to find the visual overlap between any two given elements with the help of getBoundingClientRect method of HTMLElement

Checking overlap between elements

This following snippet will tell the overlap between elements.

This snippet uses the native getBoundingClientRect function of the Element object of DOM. And methods are native and supported in all browsers, it will work or all browsers.

This accepts two parameters, both of Element object type and will return true or false based on their overlap status.

The only constraint with this snippet is that the objects passed have to be native Element objects.

/**
 * Provides the overlapping status between two elements
 * based on the passed in Element objects
 *
 * @param {Element, Element} Element object of DOM
 * @return {Boolean} overlap status or null if native object not received
 */
const isOverlapping = (e1, e2) => {
  if (e1.length && e1.length > 1) {
    e1 = e1[0];
  }
  if (e2.length && e2.length > 1){
    e2 = e2[0];
  }
  const rect1 = e1 instanceof Element ? e1.getBoundingClientRect() : false;
  const rect2 = e2 instanceof Element ? e2.getBoundingClientRect() : false;
  
  console.log(rect1, rect2);
 
  let overlap = false;
 
  if (rect1 && rect2) {
    overlap = !(
      rect1.right < rect2.left || 
      rect1.left > rect2.right || 
      rect1.bottom < rect2.top || 
      rect1.top > rect2.bottom
    );
    return overlap;  
  }

  console.warn('Please provide valid HTMLElement object');
  return overlap;
}

Above code can be checked at https://gist.github.com/pankajpatel/12f8c092b38d310b5941


Let me know through comments 💬 or on Twitter at @patel_pankaj_ and/or @time2hack

If you find this article helpful, please share it with others 🗣

Subscribe to the blog to receive new posts right to your inbox.

Hey There! You have made it this far.

Would you like to subscribe via email?