loadmore plugin

by Ea Bangalore

HTML

<div id="container">
    <ul>
      <li class="items">sdjdsh</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
      <li class="items">sddddddddddssssssssss</li>
    </ul>
</div>

CSS

#container{

  max-height:400px;
  max-width:400px;
  overflow-y:scroll;
}

li.items{
    display: block;
    padding: 20px;
    background: red;
    list-style: none;
    margin-top: 12px;
    color: #fff;
}

JavaScript

function get10ajaxData(){
   var li = '';
   $.ajax({
       url:'https://jsonplaceholder.typicode.com/users',
       type:'GET',
       dataType:'json',
       async:true,
       success:function(data){
           console.log(data);
           dat = data;
           data.forEach(function(obj){
               console.log(obj);
               li += '<li class="items">'+obj.name+'</li>';
           });
           $('#container ul').append(li);
       }
   });
   console.log(li);
   return li;
}



$(function(){
   
     
  $('#container').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
            console.log(get10ajaxData());
            
        }
    })

})