How can I find out how much space is overflowing with jquery?

user_13783790 0
Viewed 23

What I want to do is to find out how much space an absolute element inside a div element extends out of the main element.

I drew as an example

In the example, I need to find the number of pixels in the area I marked with the box and reset it to the right border.

My goal is for the dropdown element to align itself when it overflows.

Very happy if you help

auto space rotation jquery
1 Answers

I would create a function something like getOverlappingBounds that takes two selectors/dom notes to compare.

function getOverlappingBounds(node, referenceNode) {
   var boundsToCompare = node.getBoundingClientRect();
   var boundsOfReference = referenceNode.getBoundingClientRect();

   return {
     bottom: boundsOfReference.bottom - boundsToCompare.bottom,
     left: boundsToCompare.left - boundsOfReference.left,
     right: boundsOfReference.right - boundsToCompare.right,
     top: boundsToCompare.top - boundsOfReference.top,
   }
}

Then, I can use it as getOverlappingBounds(document.querySelector("#node2"), document.querySelector("#node1"))

  • A negative value for a property means it is beyond the bounds.
  • A positive value would imply that it's within.
  • A 0 value means that it shares an edge.
user_71432300
Related