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