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.

 * isOverlapping() returns the overlapping status between two elements
 * based on the passed in Element objects
 * @param {Element, Element} Element object of DOM
 * @return {Boolean|null} overlap status or null if native objet not received
 function isOverlapping(e1, e2){
  if( e1.length && e1.length > 1 ){
    e1 = e1[0];
  if( e2.length && e2.length > 1 ){
    e2 = e2[0];
  var rect1 = e1 instanceof Element ? e1.getBoundingClientRect() : false;
  var rect2 = e2 instanceof Element ? e2.getBoundingClientRect() : false;
  window.console ? console.log(rect1, rect2 ) : null ;
  var overlap = null;
  if( rect1 && rect2 ){
    overlap = !(
        rect1.right < rect2.left || 
        rect1.left > rect2.right || 
        rect1.bottom < || > rect2.bottom
    return overlap;  
  } else {
    window.console ? console.warn( 'Please pass native Element object' ) null;
    return overlap;
Hey There! You have made it this far.
Would you like to subscribe via email?
You've successfully subscribed to Time to Hack!