Edit in JSFiddle

window.setVaribles = function () {
    $('#top').text($('#demo').scrollTop());
    $('#height').text($('#demo')[0].scrollHeight);
    $('#client').text($('#demo')[0].clientHeight);
    var d = $('#demo')[0].scrollHeight - $('#demo').scrollTop() - $('#demo')[0].clientHeight
    $('#distance').text(d);
}

<div id="demo" onscroll="setVaribles()">
    <div id="content">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</div>
</div>
<div>scrollTop is: <span id="top"></span>

    <br/>scrollHeight is: <span id="height"></span>

    <br/>client is: <span id="client"></span>

    <br/>Distance to end: <span id="distance"></span>

</div>

#demo {
    margin-top: 10px;
    height: 200px;
    width: 200px;
    overflow: auto;
    resize: both;
}
#content {
    height: 800px;
    background-color: coral;
}