在Javascript中动态计算溢出量

Calculating Overflow Amount Dynamically in Javascript

本文关键字：溢出 计算 动态 Javascript      更新时间：2023-09-26

我有一个容器div，设置了高度和宽度的相对位置。我想弄清楚在Javascript中有多少，如果有的话，它的孩子扩展超出了容器div的边缘在上，右，下和左方向。任何帮助将非常感激!

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;
一般

: 

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);

您还可以获取元素的width和scrollWidth或height和scrollHeight属性之间的差异

相关文章：