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

Posted 2023-03-05

【中文标题】无限滚动时防止滚动条跳跃

【英文标题】：Preventing scroll bar jump while infinite scrolling

【发布时间】：2014-03-26 20:12:45

【问题描述】：

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

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

【问题讨论】：

这是一种实际上有意义的浏览器行为，当加载新内容时，页面高度会突然增加，因此滚动条会跳转以表示页面相对于新内容高度的正确位置.一种可能的解决方法是缓慢增加新内容的大小（一次显示一个像素）以允许滚动条缓慢增长。 （我没有尝试过这个解决方案，也没有看到它有效，这只是一个想法）

【参考方案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);

【讨论】：

您好！任何机会您都可以通过实时测试用例帮助演示此技术，即。 jsfiddle.net/frank_o/pww88u4f?