javascript - 滚动到顶部而不是底部时，Ajax可以工作

我从昨天开始为此苦苦挣扎。当我到达页面顶部而不是页面底部时，AJAX一直显示。

当我到达页面底部时，AJAX不显示任何内容：When Scroll Down

但是，当我到达页面顶部时，AJAX起作用了：When Scroll Up

我希望AJAX在到达页面底部时显示。

$(window).scroll(function() {
  var scrollHeight = $(document).height();
  var scrollPosition = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    loadmore();
  }
});

function loadmore() {
  var val = document.getElementById('row_no').value;
  var val1 = document.getElementById('user_id').value;

  $.ajax({
    type: 'POST',
    url: 'getData.php',
    data: {
      getresult: val,
      getresult1: val1
    },
    success: function(response) {
      var content = document.getElementById('all_rows');
      content.innerHTML = content.innerHTML + response;

      // We increase the value by 10 because we limit the results by 10
      document.getElementById('row_no').value = Number(val) + 10;
    }
  });
}

谢谢。

最佳答案

您的计算有些不正确：您想要的是将scrollPosition与视口高度和文档高度之间的差异进行比较（在代码中后者为scrollHeight）：

var scrollHeight = $(document).height();
var scrollPosition = $(window).scrollTop();
var viewportHeight = $(window).height();
if (scrollPosition === scrollHeight - viewportHeight) {
  loadmore();
}

原因是您知道页面顶部是视口从文档顶部开始的位置，这是文档高度和视口高度之间的差。以下图表可帮助您了解：



要以不同的方式查看它，您知道当scrollTop和视口高度的总和等于文档高度时，您已经滚动到底部。当用户尚未到达底部时，总和将始终小于文档高度，即：

if (scrollPosition + viewportHeight >= scrollHeight) {
    loadmore();
}

参见概念证明：

$(function() {
  $(window).scroll(function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).scrollTop();
    var viewportHeight = $(window).height();

    if (scrollPosition + viewportHeight >= scrollHeight) {
      loadmore();
    }
  });

  function loadmore() {
    console.log('load more logic');

    // Insert load more logic here
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Keep scrolling to reach bottom</strong></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in risus nisi. Morbi eu neque vitae massa accumsan tristique. Nulla quis ultrices leo, at commodo nunc. Aliquam mattis suscipit vehicula. Quisque finibus semper eleifend. Sed viverra interdum odio, et pretium tortor pharetra quis. Pellentesque lacus magna, porttitor a mauris eu, venenatis aliquet urna. Mauris velit tortor, sollicitudin eu pretium sit amet, ullamcorper commodo nisi.</p>

<p>Nunc non sodales nulla, et facilisis sem. Nunc interdum et tellus et finibus. Ut vulputate aliquet felis, quis consequat tellus vulputate et. Pellentesque tempus in mi in vestibulum. Morbi ut nulla magna. Vestibulum orci diam, malesuada vel nisi id, egestas finibus elit. Phasellus id vulputate leo. Morbi metus velit, aliquam eget ligula sed, lacinia fermentum enim. Maecenas malesuada nisi vel massa pellentesque, at mattis nibh iaculis. Vestibulum facilisis felis velit, ut finibus sapien venenatis eu. Vivamus gravida venenatis consequat.</p>

<p>Donec tempus ullamcorper est et mattis. Duis et sollicitudin nisi. Phasellus molestie, sem a dictum lobortis, justo sem consequat est, ut fringilla risus mauris pharetra ligula. Mauris nec nisl efficitur, elementum enim eget, tincidunt nibh. Morbi hendrerit dignissim enim commodo finibus. Nunc vitae quam quis eros molestie imperdiet. Maecenas commodo sit amet diam id feugiat. Praesent quis arcu porta, gravida dolor vel, porttitor justo. Fusce vitae arcu mattis, facilisis risus a, lacinia augue. Donec at mi a lectus accumsan iaculis.</p>

<p>Integer a turpis fermentum, ultricies magna et, interdum diam. Etiam ornare malesuada fermentum. Morbi suscipit non quam quis tempus. Vestibulum quis efficitur magna, in facilisis tellus. Etiam sapien purus, dictum in varius in, blandit id sapien. Donec interdum tempor nisi, in semper mauris. Etiam consequat blandit dapibus. Fusce volutpat ipsum vel erat ullamcorper sodales. Integer vitae pretium lectus. Mauris cursus, arcu eu condimentum aliquam, mi dui blandit urna, ut commodo massa leo a sem.</p>

<p>Donec auctor vestibulum turpis, at feugiat neque molestie ac. Vivamus tristique tempus sem, et rutrum ipsum sollicitudin hendrerit. Praesent a pretium leo. Maecenas elementum felis quam, eu gravida ante efficitur non. Sed a interdum neque. Cras eget auctor metus. Duis tempor, nisi ut sodales varius, sapien est aliquet nunc, non porttitor ipsum libero consequat odio. Vestibulum suscipit, quam et accumsan interdum, est leo semper nibh, ac gravida ante metus vitae justo.</p>

关于javascript - 滚动到顶部而不是底部时，Ajax可以工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50288162/