How can I determine the end of the scroll of a specified javascript element?

Question

I use Google Chrome 10 and write JavaScript to detect the end of the scroll.

To detect the end of the scroll window, the code below worked fine:

window.addEventListener(
    'scroll',
    function()
    {
        var scrollTop = document.documentElement.scrollTop ||
            document.body.scrollTop;
        var offerHeight = document.body.offsetHeight;
        var clientHeight = document.documentElement.clientHeight;
        if (offsetHeight <= scrollTop + clientHeight)
        {
            // Scroll end detected
        }
    },
    false
);

Now I want to detect the end of the scroll of the specified element, for example <section id="box" style="height: 500px; overflow: auto;">
This is code that is not detected correctly:

document.getElementById('box').addEventListener(
    'scroll',
    function()
    {
        var scrollTop = document.getElementById('box').scrollTop;
        var offerHeight = document.getElementById('box').offsetHeight;
        var clientHeight = document.getElementById('box').clientHeight;
        if (offsetHeight <= scrollTop + clientHeight)
        {
            // This is called before scroll end!
        }
    },
    false
);

Can someone fix my code? Thank.

Answer 1

Fixed.

document.getElementById('box').addEventListener(
    'scroll',
    function()
    {
        var scrollTop = document.getElementById('box').scrollTop;
        var scrollHeight = document.getElementById('box').scrollHeight; // added
        var offsetHeight = document.getElementById('box').offsetHeight;
        // var clientHeight = document.getElementById('box').clientHeight;
        var contentHeight = scrollHeight - offsetHeight; // added
        if (contentHeight <= scrollTop) // modified
        {
            // Now this is called when scroll end!
        }
    },
    false
)