In this post we will learn how to implement pull to refresh using web technologies. This comes handy when we create mobile apps using phonegap. pull to refresh was invented by Twitter. After it was a success every other app started implementing this feature.
View Demo
Before reading further please read my earlier post on Detecting End Of Scrolling In HTML Element. In that post I have explained many properties and functions related to scrolling.
Implementation of Live Preview
<!doctype html>
<html>
<head>
<title>Detect End Of Scrolling</title>
<script type="text/javascript">
window.addEventListener("load", function() {
window.scrollBy(0, 100);
}, false);
window.document.addEventListener("scroll", function(){
if(window.pageYOffset == 0)
{
alert("Loading data using AJAX");
window.scrollBy(0, 100);
}
}, false);
</script>
<style type="text/css">
body
{
height: 6000px;
background-color: grey;
}
span
{
font-size: 100px;
}
</style>
</head>
<body>
<span>Pull to refresh</span>
</body>
</html>
<html>
<head>
<title>Detect End Of Scrolling</title>
<script type="text/javascript">
window.addEventListener("load", function() {
window.scrollBy(0, 100);
}, false);
window.document.addEventListener("scroll", function(){
if(window.pageYOffset == 0)
{
alert("Loading data using AJAX");
window.scrollBy(0, 100);
}
}, false);
</script>
<style type="text/css">
body
{
height: 6000px;
background-color: grey;
}
span
{
font-size: 100px;
}
</style>
</head>
<body>
<span>Pull to refresh</span>
</body>
</html>
@narayanprusty
Leave a Reply