在無限滾動時防止滾動條跳轉

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