Javascript 获取dom容器中的滚动百分比

我有一个应用程序，它的内容应该在用户向下滚动时加载，比如Twitter/Facebook

我试图根据滚动事件和当前滚动位置检测何时加载更多数据

我读过这篇文章：

这几乎是可行的，但在我的情况下，当我滚动到底部，我有

$(window).scrollTop() + $(window).height() > $(document).height()

窗口滚动顶部+窗口高度如何可能大于高度？ 它不是更大，只是一点点

console.error("$(window).scrollTop() + $(window).height()=",$(window).scrollTop() + $(window).height(),"  VS  $(document).height()",$(document).height());

// It gives me in the console:
$(window).scrollTop() + $(window).height()= 877   VS  $(document).height() 872 

很多时候，当我完全滚动到底部时，我会得到一些不知从何而来的额外像素。有人能解释一下吗

我试图计算容器中滚动内容的百分比：

    getScrollPercentage: function(scrollableElementSelector) {

        var scrollableElement = $(scrollableElementSelector);

        // This is the number of hidden pixels of the scrollable element inside its container
        var hiddenHeigth;
        if ( scrollableElementSelector === window ) {
            hiddenHeigth = $(document).height() - $(window).height();
        } else {
            hiddenHeigth = scrollableElement[0].scrollHeight - scrollableElement.outerHeight();
        }

        // This is the number of scrolled pixels
        var scrolledHeight = scrollableElement.scrollTop();

        if ( hiddenHeigth < scrolledHeight ) {
            //throw new Error("hiddenHeigth "+hiddenHeigth+" < scrolledHeight " +scrolledHeight + " -> Impossible unless you didn't use this function correctly");
        }

        var scrollPercent = ( scrolledHeight / hiddenHeigth ) * 100;

        if ( this.debug ) {
            console.debug("hiddenHeigth=",hiddenHeigth,"scrolledHeight=",scrolledHeight,"scrollPercent=",scrollPercent);
        }

        return scrollPercent;
    }

这个函数运行得很好，除了当我滚动到底部时，我通常会得到103%->对于我的用例来说不是什么大问题，但我正在努力理解这个问题

尝试使用$document.outerHeight而不是$document.height

---

我刚刚添加了一把小提琴来演示它的工作原理；谢谢，但实际上这似乎不是问题所在。正如你所看到的，这个简单的提琴不会重现我的问题，因为当你滚动到底部时，它打印100%，而不是103%：这里它打印100%，呵呵，你用的是什么浏览器？我在这里使用的是Chrome，SS:我在做这个例子的时候使用的是Firefox。顺便说一句，你有没有尝试过用我的解决方案更新你的网站，看看这是否有效？这件事额外的像素，从哪里来，通常是那些外部高度，你应该使用。如果这不适合你的问题，请用你的HTML更新你的问题，这样我可以在这里重现你的问题。

    getScrollPercentage: function(scrollableElementSelector) {

        var scrollableElement = $(scrollableElementSelector);

        // This is the number of hidden pixels of the scrollable element inside its container
        var hiddenHeigth;
        if ( scrollableElementSelector === window ) {
            hiddenHeigth = $(document).height() - $(window).height();
        } else {
            hiddenHeigth = scrollableElement[0].scrollHeight - scrollableElement.outerHeight();
        }

        // This is the number of scrolled pixels
        var scrolledHeight = scrollableElement.scrollTop();

        if ( hiddenHeigth < scrolledHeight ) {
            //throw new Error("hiddenHeigth "+hiddenHeigth+" < scrolledHeight " +scrolledHeight + " -> Impossible unless you didn't use this function correctly");
        }

        var scrollPercent = ( scrolledHeight / hiddenHeigth ) * 100;

        if ( this.debug ) {
            console.debug("hiddenHeigth=",hiddenHeigth,"scrolledHeight=",scrolledHeight,"scrollPercent=",scrollPercent);
        }

        return scrollPercent;
    }