Calculating Overflow Amount Dynamically in Javascript

Question

I have a conatiner div with a set height and width positioned relatively. I'd like to figure out in Javascript by how much, if any, it's children extend beyond the container div's edge in the top, right, bottom and left directions. Any help would be much appreciated!

Domenic · Accepted Answer · 2011-09-17 21:18:31Z

2

Here's the code for top:

var myDivEl = document.getElementById("my-div");
var divTop = myDivEl.getBoundingClientRect().top;

var descendants = myDivEl.getElementsByTagName("*");

var tops = [];
for (var i = 0, descendant; descendant = descendants[i]; ++i) {
   tops.push(descendant.getBoundingClientRect().top);
}

var minTop = Math.min.apply(Math, tops);

var diff = divTop - minTop;

More generally:

function getBoundingClientRectDiff(el, propName, minOrMax) {
    var propValue = el.getBoundingClientRect()[propName];

    var descendants = myDivEl.getElementsByTagName("*");

    var descendantPropValues = [];
    for (var i = 0, descendant; descendant = descendants[i]; ++i) {
       descendantPropValues.push(descendant.getBoundingClientRect()[propName]);
    }

    var extremePropValue = Math[minOrMax].apply(Math, descendantPropValues);

    return minOrMax === "Max" ? extremePropValue - propValue
                              : propValue - extremePropValue;
}

function getBoundingClientRectDiffs(el) {
    return {
        top: getBoundingClientRectDiff(el, "top", "Min"),
        right: getBoundingClientRectDiff(el, "right", "Max"),
        bottom: getBoundingClientRectDiff(el, "bottom", "Max"),
        left: getBoundingClientRectDiff(el, "left", "Min")
    };
}

// use like so:
var diffs = getBoundingClientRectDiffs(myDivEl);
console.log(diffs.top, diffs.right, diffs.bottom, diffs.left);

edited Sep 17, 2011 at 21:18

answered Sep 17, 2011 at 21:13

Domenic

113k42 gold badges227 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VinnyD Over a year ago

Domenic, how can I adapt this to take into account the display property of child nodes? Basically, if a child is set to display:none; i'd like to not include it or any of it's child nodes in the calculation.

Domenic Over a year ago

@VinnyD, you would add an if(descendant.style.display !== "none") { } inside the for loop, wrapping descendantPropValues.push(...).

btleffler · Accepted Answer · 2011-09-17 21:29:51Z

0

You could also get the difference between an element's width and scrollWidth or height and scrollHeight properties.

answered Sep 17, 2011 at 21:29

btleffler

9927 silver badges13 bronze badges

Collectives™ on Stack Overflow

Calculating Overflow Amount Dynamically in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related