在AJAX响应上实现无限滚动

Question

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

喜欢

< div class="parent" >< p >< span >< /span >< /p ></ div >

< div class="parent" >< p >< span >< /span >< /p >< / div >

< div class="parent" >< p >< span >< /span >< /p >< / div >

< div class="parent" >< p >< span >< /span >< /p >< / div >

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

其中< div class=" parent " >是自动滚动div。

当页面加载和/或更多数据加载到ajax调用时，如何将< span >< / span >元素放在div的可见部分？

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

Answer 1

我们走了：

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>

或者你可以从这里使用jQuery滚动插件之一：enter link description here

希望它有所帮助;）

Answer 2

我想在您选择无限滚动的UI上首先提出一些建议。

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

2. 要进行滚动：

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

3. 进行AJAX通话：

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

4. 为滚动创建一个函数：

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