无限滚动时防止滚动条跳跃

Question

在 Firefox 和 Chrome 中，有没有办法（可能使用智能 CSS）来防止滚动条在无限滚动时跳跃？

常见示例：https://twitter.com/search?q=stackoverflow

Answer 1

我知道这是一个老问题，但我想我会分享我确定的最佳解决方案。为了使用它，您必须能够计算整个页面的高度（或确定允许的最大值）。

所以在高层次上：

1) 确定要注入内容的容器的高度，设置它。这将防止任何滚动跳跃，并让用户准确了解他们正在查看多少内容。

2) 设置一个 javascript 来检测最后一段内容的位置，并在达到该滚动点时触发加载更多。

var scrollInterval;
function searchScroll() {
    scrollInterval = setInterval(function () {
        var lastDivInContainer = $('#results_container').children().last();
            if ((lastDivInContainer.offset().top + lastDivInContainer.height()) < ($(window).height() + $(window).scrollTop()) + 100) {
            $.ajax({
                url: "/search/page.php",
                beforeSend: function(xhr) {
                    clearInterval(scrollInterval);
                }
            }).done(function (response) {
                if (response != 'complete') {
                    $("#results_container").append(response);
                    searchScroll();
                }
            });
        }
    }, 500);
}