如何使用JavaScript检测指定元素的滚动结束？

Question

我正在使用Google Chrome 10并编写JavaScript代码来检测滚动结束。

要检测window的滚动结束，以下代码可以正常工作：

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
);

现在我想要检测指定元素的滚动结束，比如<section id="box" style="height: 500px; overflow: auto;">
这是无法正确检测的代码：

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
);

能否有人修复我的代码？谢谢。

- Japboy

Answer 1

已修复。

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
)

- Japboy

---

非常感谢！这很完美。 - Jesus Cabrita

你真是个天才！你囊括了我和我的JavaScript！ - Thanasis

@JesusCabrita 是的，确实！ - Thanasis

在你的代码中进行一个小修正。在if条件中添加Math.ceil(scrollTop)以获得更好的结果。 - Nidhi Dadiya