JavaScriptで動的にオーバーフロー量を計算する

Question

私は、高さと幅が相対的に設定されたコンガニタのdivを持っています。私はJavascriptで、もしあれば、子供がコンテナdivの端を上、右、下、左の方向にどれだけ伸ばしているかを調べたいと思います。どんな助けでも大歓迎です！ここで

Answer 1

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

Answer 2

また要素の幅とscrollWidthまたは高さとscrollHeightプロパティの違いを得ることができます。