Lösungen ,beim seiten ende neü daten laden

beim-seiten-ende-neue-daten-laden.php

Quell Code

<iframe srcdoc="<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<style>
body{
height:1000px;
}
div ,table{
    border: 1px solid #ccc; 
}
#fest{
position:fixed;
top:5px;
right:20px;
color:black;
height:80px;
width:300px;
border:2px solid blue;
background:lightgrey;
overflow:auto;
}

.loading {
  text-align: center;
  position: fixed;
  display:none;
  color: #fff;
  z-index: 999999;
  background: blue;
  padding: 8px 18px;
  border-radius: 5px;
  left: calc(50% - 45px);
  top: calc(50% - 18px);
}


</style>
</head>
<body>
     <div class='loading' v-show='loading'>
        <span class='fa fa-spinner fa-spin'></span> Loading
      </div>
<div id='fest'>
<div id='main0'></div>
<div id='main1'></div>
<div id='main2'></div>
</div>

<script src='//code.jquery.com/jquery-3.2.1.min.js'></script>
<script>

localStorage.setItem('start',0);
$(window).scroll(function () {
        scroll=$(window).scrollTop();
        scrollheight=$(document).scrollTop();
        doc=$(document).height()-550;
        //win=$(window).height();
        //h=doc-win; 
          document.getElementById('main0').innerHTML=doc+' - '+scroll+' - '+scrollheight;
        if(scrollheight>doc){
             
             start1=localStorage.getItem('start');
              document.getElementById('main1').innerHTML='Datensatz '+start1+' am Laden';
             var start=parseInt(start1)+20;
             weiter(start);
             localStorage.setItem('start',start);
        }
});

function weiter(start){
an();
    $.ajax({
             type: 'POST',
             url: 'scrollladen.php',
             data: {start:start},
             success: function(data){ 
                  document.getElementById('main2').innerHTML=start+' geholt';  
                  $('body').append('<table>'+data+'</table>');
             }
    });
}


 function an (){
   document.getElementsByClassName('loading')[0].style.display='block';
      setTimeout(function(){
 
    document.getElementsByClassName('loading')[0].style.display='none';
 
      }, 1200);
 }
 


</script></body>
</html>" style="height:500px;width:100%;outline:none;border:none"></iframe>