Skip to content

Instantly share code, notes, and snippets.

@afzafri

afzafri/infinitescroll.html

Last active January 10, 2017 13:21
Show Gist options
  • Save afzafri/0577581d34c756a10ea71539f877b2b8 to your computer and use it in GitHub Desktop.
Save afzafri/0577581d34c756a10ea71539f877b2b8 to your computer and use it in GitHub Desktop.
Download ZIP
My own simple jquery infinite scrolling, to be used in future project with ajax
Raw
infinitescroll.html
<!DOCTYPE html>
<html>
<head>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Infinite Scroll Test</title>
</head>
<body>
<style type="text/css">
li {
font-size: 70px;
}
</style>
<ul id="items">
<li>Current <input type="text" value="1" id="current"></li>
<li>Last <input type="text" value="5" id="last"></li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
<li>Testtt</li>
</ul>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
var current = $('#current').val();
var last = $('#last').val();
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if(current <= last)
{
var newcur = parseInt(current) + 1;
$('#current').val(newcur);
var itemss = '<li>baru'+current+'</li><li>baru'+current+'</li><li>baru'+current+'</li>';
$('#items').append(itemss);
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment