Question

我有以下脚本导致页面从数据库中获取更多记录并在页面末尾加载它们。它在Mac上的Safari 10.0中运行良好，但在Google Chrome 53.0.2785.143中运行良好。如果我将Chrome浏览器窗口的大小调整为几乎智能手机大小，那么它就会开始工作。

当控制台不工作时，控制台中没有任何内容，因此没有任何错误需要调试。如果我观察Web服务器日志，当我尝试向下滚动页面时没有请求，所以根本没有发生任何事情。

这是脚本：

< script type = "text/javascript" >
  var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;
  }
});

function loadArticle(pageNumber) {
  $('#inifiniteLoader').show('fast');
  $.ajax({
    url: "getMoreEvents.php",
    type: 'POST',
    data: "action=" + action + "&skip=" + skip,
    success: function(html) {
      $('#inifiniteLoader').hide('1000');
      $("#content").append(html); // This will be the div where our content will be loaded
    }
  });
  return false;
} < /script>

Answer 1

$(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;

Answer 2

我没有足够的声誉发表评论，所以我会把它放在这里：

我认为这个53.0.2785.143版本的chrome有一个scrolltop错误。我的代码运行正常，然后停止在chrome中。

scrollTop has stopped working in Chrome

Answer 3

我遇到了完全相同的问题。它可以在我尝试过的所有浏览器上运行，甚至可以在本地服务器上运行的chrome上运行，但不适用于将项目部署到在https安全服务器上运行的Heroku上。这种令人讨厌的行为似乎是Chrome上的错误。

解决方案是在页面结束之前调用该函数，并带有一个小的“空白”。

解决方案在这里： solution by Vytaliy Makovyak

无限滚动无法在Google Chrome中使用

3 个答案: