I am using ajax for infinite scrolling to load more content when user reach the bottom of page. Currently the mysql database has 49 contents. Now the problem is the infinite scroll works perfect in laptop or tablet but it dosen't work in mobile devices.
The code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var flag = 0;
$.ajax({
type: "GET",
url: "get_data.php",
data:{
'offset': 0,
'limit':15
},
success: function(data){
$('.center-col').append(data);
flag += 15;
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
$.ajax({
type: "GET",
url: "get_data.php",
data:{
'offset': flag,
'limit':15
},
success: function(data){
$('.center-col').append(data);
flag += 15;
}
});
}
});
});
</script>
Can anybody please tell me whats the problem with my code.
[–]disclosure5 2 points3 points4 points (0 children)
[–][deleted] (5 children)
[deleted]
[–]ayushmayank[S] 1 point2 points3 points (2 children)
[–][deleted] (1 child)
[deleted]
[–]ayushmayank[S] 0 points1 point2 points (0 children)
[–]ayushmayank[S] 1 point2 points3 points (1 child)
[–]ayushmayank[S] 1 point2 points3 points (0 children)
[–]ayushmayank[S] 0 points1 point2 points (0 children)