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

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

1 个答案: