Получите процент прокрутки в контейнере dom

У меня есть приложение с содержимым, которое должно быть загружено, когда пользователь прокручивается вниз (например, Twitter/Facebook...).

Я пытаюсь определить, когда загружать больше данных на основе событий прокрутки и текущей позиции прокрутки.

Я прочитал этот пост: qaru.site/info/14854/...

if($(window).scrollTop() + $(window).height() == $(document).height()) {
    console.error("bottom!");
}

Это почти работает, но в моем случае, когда я прокручиваю нижнюю часть, я

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

Как возможно, что окно scrolltop + высота окна больше высоты? Это не намного больше, просто немного.

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% → Не большое дело для моего использования, но я пытаюсь понять проблему.

Ответ 1

Попробуйте использовать $(document).outerHeight() вместо $(document).height()

FIDDLE WORKING