在 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 或 class

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 滚动插件之一：在此处 输入链接描述

希望能帮助到你;）

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