testing getBoundingClientRect

testing getBoundingClientRect

CSS

html, body {
    margin:0;
    padding:0;
}
div {
    width:100%;
    height:200px;
    background:#aa0;
    margin:2px 0;
}
div:nth-child(even) {
    background:#0aa;
}

JavaScript

var numDIVs = 4, div, rect;
for (var i = 0; i < numDIVs; i += 1) {
    div = document.createElement('div');
    document.body.appendChild(div);
}

window.addEventListener('scroll', onScroll, false);
div = document.querySelectorAll('div')[0];
rect = div.getBoundingRect();

function onScroll(e) {
    rect = div.getBoundingRect();
    console.log('---');
    console.log('rect' + rect);
}