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