CODEWITHSUNDEEP
javascriptandroidjquerycordovajquery-mobile
Inator
Inator

Reputation: 1024

Android Phonegap with jQuery Mobile - back button results in scroll to top of page

My mobile app behaves as expected on iOS, but under android the any overflow divs that were scrolled before a link to a new page is tapped, are scrolled back to the top upon return. The pages do not appear to be reloaded, just scrolled to the top before transition is complete.

I seem to be experiencing the issue discussed here. None of the proposed workarounds posted there have helped.

I'm using Phonegap 2.0.0 and jQuery Mobile 1.2.0

Anyone have a solution?

Upvotes: 1

Views: 1285

Answers (2)

Inator
Inator

Reputation: 1024

Disabling the back button is not a workable solution for me, and since history.back() is employed within the jQM framework for back navigation, the same result persists anyway. Even the use of Phonegap's navigator.history.back() alternative still yields the ill effects. In the end I added handlers like so, which admitedly could be improved (suggestions welcome):

/* ANDROID WORKAROUND */
$('div').on('pagebeforehide', function(event, ui) {
    var scrollPos = $(this).find('.scrolldiv').scrollTop();
    $(this).jqmData('scrollPos',scrollPos );
});

$('div').on('pagebeforeshow', function(event, ui) {        
    var page = $(this);
    setTimeout(function(){
        //using animate becuse I could not get scrollTo() to work (?)
        $(page).find('.scrolldiv').animate({scrollTop: $(page).jqmData('scrollPos')}, 0);
    },1); //add it to the JS process stack
});

Upvotes: 0

Jaya Mayu
Jaya Mayu

Reputation: 17247

Android back button messes up much with the PhoneGap. What I did was simply disabled the back button in the Android.

$(function(){
    document.addEventListener("deviceready", onDeviceReady, false);
})

// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {
    console.log("Back button pressed but nothing happened");
}

It's my choice of approach. If you wanna utilize the back button then this solution is not for you.

Upvotes: 2

Related Questions