Javascript 在AJAX响应上实现无限滚动

如何在Div中滚动元素。有多个Div，每个Div内容都是一个元素

像

它们是动态生成的（无限滚动）

其中

是自滚动div

在ajax调用上加载页面和/或更多数据时，如何将

元素放在div的可见部分

请参阅图像以供参考…我希望在页面加载时，突出显示的文本始终是div的可见部分…或者从ajax加载更多数据

我们开始：

1） 必须为每个元素添加id或类

2） 使用焦点功能，您可以将元素放在div的可见部分。 您必须处理setVisibleElement（）函数文档onload事件

<script>
function setVisibleElement(){
var parentId = document.getElementById("getParentId");
var element = document.getElementById("yourElementId");
parentId.style.overflow = "auto";
element.focus();
}
</script>

函数setVisibleElement（）{
var parentId=document.getElementById（“getParentId”）；
var element=document.getElementById（“yourElementId”）；
parentId.style.overflow=“自动”；
元素focus（）；
}

或者您也可以从这里使用jQuery scroll插件之一：

---

希望有帮助；）

首先，我想对您为无限滚动选择的UI提出一些建议

您只需要有一个可滚动的父div。

要进行滚动，请执行以下操作：

// CSS
.parent {
  overflow: auto;
}
/*
  This makes sure that it's your parent div that can be scrolled
  Not the whole page.
*/

进行AJAX调用：

function getData() {
  $.ajax({
    url: "your url",
    method: 'GET'
  })
  .done(function(data) {
     $.each(data, function(i, val) {
       $(".parent").append("<span>"+val+"</span>");
     }
  });
};

---

这个问题很不清楚。在哪个div上有无限滚动的功能？什么是自滚动div？

function getData() {
  $.ajax({
    url: "your url",
    method: 'GET'
  })
  .done(function(data) {
     $.each(data, function(i, val) {
       $(".parent").append("<span>"+val+"</span>");
     }
  });
};

var scrollTracker = function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    getData();
  } 
}