Skip to content

Commit 1a52475

Browse files
author
scottjehl
committed
added a pre-transition class to set pages to display: block early and allow for their scrollTop and focus to be set before they are shown.
1 parent 440be55 commit 1a52475

File tree

2 files changed

+35
-13
lines changed

2 files changed

+35
-13
lines changed

js/jquery.mobile.navigation.js

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -412,8 +412,8 @@
412412
var active = $.mobile.urlHistory.getActive();
413413

414414
if( active ){
415-
var lastScroll = $( window ).scrollTop();
416-
415+
var lastScroll = $.support.touchOverflow ? $( ".ui-page-active" ).scrollTop() : $( window ).scrollTop();
416+
417417
// Set active page's lastScroll prop.
418418
// If the Y location we're scrolling to is less than minScrollBack, let it go.
419419
active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll;
@@ -434,19 +434,31 @@
434434
toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
435435
screenHeight = getScreenHeight();
436436

437-
// Scroll to top
437+
// Scroll to top, hide addr bar
438438
window.scrollTo( 0, $.mobile.defaultHomeScroll );
439439

440440
if( fromPage ) {
441441
//trigger before show/hide events
442442
fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
443443
}
444-
toPage
445-
.height( screenHeight + toScroll )
446-
.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
444+
445+
if( !$.support.touchOverflow ){
446+
toPage.height( screenHeight + toScroll );
447+
}
448+
449+
toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
447450

448451
//clear page loader
449452
$.mobile.hidePageLoadingMsg();
453+
454+
if( $.support.touchOverflow && toScroll ){
455+
toPage.addClass( "ui-mobile-pre-transition" );
456+
// Send focus to page as it is now display: block
457+
reFocus( toPage );
458+
459+
//set page's scrollTop to remembered distance
460+
toPage.scrollTop( toScroll );
461+
}
450462

451463
//find the transition handler for the specified transition. If there
452464
//isn't one in our transitionHandlers dictionary, use the default one.
@@ -455,18 +467,25 @@
455467
promise = th( transition, reverse, toPage, fromPage );
456468

457469
promise.done(function() {
458-
//reset toPage height bac
459-
toPage.height( "" );
460-
461-
// Send focus to the newly shown page
462-
reFocus( toPage );
470+
//reset toPage height back
471+
if( !$.support.touchOverflow ){
472+
toPage.height( "" );
473+
// Send focus to the newly shown page
474+
reFocus( toPage );
475+
}
463476

464477
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
465-
$.mobile.silentScroll( toScroll );
478+
if( !$.support.touchOverflow ){
479+
$.mobile.silentScroll( toScroll );
480+
}
466481

467482
//trigger show/hide events
468483
if( fromPage ) {
469-
fromPage.height("").data( "page" )._trigger( "hide", null, { nextPage: toPage } );
484+
if( !$.support.touchOverflow ){
485+
fromPage.height( "" );
486+
}
487+
488+
fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
470489
}
471490

472491
//trigger pageshow, define prevPage as either fromPage or empty jQuery obj

themes/default/jquery.mobile.core.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
-ms-overflow-scrolling: touch;
3333
overflow-scrolling: touch;
3434
}
35+
.ui-page.ui-mobile-pre-transition {
36+
display: block;
37+
}
3538

3639
/* loading screen */
3740
.ui-loading .ui-mobile-viewport { overflow: hidden !important; }

0 commit comments

Comments
 (0)