Implementing infinite scroll on AJAX response

Question

How to Scroll an element inside a Div. There are multiple div and each div content an element

Like

< 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 >

and they are generated dynamically (infinite scroll)

where < div class=" parent " > is self scrolling div.

How to put < span >< / span > element in visible part of div when page load AND/OR more data load on ajax call?

See Images for reference...I want highlighted text always visible part of div when page load...or more data load from ajax..

Answer 1

Here we go:

1) You have to add id or class for each element

2) With focus function you may put element in visible part of div. You must to handle setVisibleElement() function document onload event.

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

or you may use one of jQuery scroll plugin from here: enter link description here

Hope it helps;)

Answer 2

A few suggestions that I'd like to make first on the UI that you have chosen for infinite scrolling.

1. You need to have only one scrollable parent div.

2. To make the scroll happen :

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

3. Making the AJAX call:

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

4. create a function for the scroll:

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