getBoundingClientRect

by bakhshi

HTML

<button class="get">Get</button>
<div class="scrollable">
    <div class="large">
        <div class="main"></div>
    </div>
</div>
<span class="out"></span>

CSS

.scrollable{
    overflow:auto;
    height:500px;
    background-color:blue;    
}
.large{
    height:1000px;
    background-color:yellow;
    position:relative;
}
.main{
    width:200px;
    height:200px;
    border:solid 1px black;
    background-color:red;
    position:absolute;
    bottom:0;
}

JavaScript

var $ = document.querySelectorAll.bind(document);
$('.get')[0].addEventListener('click', function(){
    var rect = $('.main')[0].getBoundingClientRect();
    var out = $('.out')[0];
    out.innerHTML = ["left:", rect.left, " top:", rect.top, " width:", rect.width, " height:", rect.height].join('');
});