Get the scroll distance from bottom to scroll

Question

I have a div container. It has a scrollbar. I want to get the distance between the scroll and the bottom

Tried this without any luck.

var posTop = $('.container').scrollTop() - $('.container').offset().top;

What is the correct way to get that distance height ?

Answer 1

To calculate the height of the remaining document you can subtract the position of the bottom of the element from the maximum scroll height. Try this:

$('#container').scroll(function() {
    var remaining = $(this).prop('scrollHeight') - ($(this).scrollTop() + $(this).height());
    $('#debug').text(remaining);
}).scroll();

#container {
    height: 100px;
    width: 300px;
    overflow: scroll;
    background-color: #CCC;
    position: relative;
}
#content {
    height: 1000px;
}
#debug {
    position: fixed;
    top: 10px;
    left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
    <div id="debug"></div>
    <div id="content"></div>
</div>

Answer 2

We can calculate with those values,

var scrollPosition = window.pageYOffset; // current position
var windowSize     = window.innerHeight; // window height
var bodyHeight     = document.body.offsetHeight; // body height