How to make pull down Page refresh on Web app using jQuery Mobile or Javascript

Question

I'm developing a simple web application, I want to give the ability to the user to refresh the page with pull down refresh thing like android or iOs.

the refresh it will only lead to reload the page nothing else :

location.reload();

I'd like to use jQuery Mobile or Javascript.

Answer 1

jsfiddle DEMO

This is on body but you can have it in other elements of course. In this example html and body are with 100% height and different background-colors so you'll notice when dragging the body down. Mouse moves down more than 200px and page will reload.

var mouseY = 0;
var startMouseY = 0;
$('body').on('mousedown', function (ev) {
    mouseY = ev.pageY;
    startMouseY = mouseY;
    $(document).mousemove(function (e) {
        if (e.pageY > mouseY) {
            var d = e.pageY - startMouseY;
            console.log("d: " + d);
            if (d >= 200)
                location.reload();
            $('body').css('margin-top', d/4 + 'px');
        }
        else
            $(document).unbind("mousemove");


    });
});
$('body').on('mouseup', function () {
    $('body').css('margin-top', '0px');
    $(document).unbind("mousemove");
});
$('body').on('mouseleave', function () {
    $('body').css('margin-top', '0px');
    $(document).unbind("mousemove");
});