prototyped version of scrolling using overflow touch. No support for fixed headers yet

Author: scottjehl

js/jquery.mobile.core.js

@@ -95,9 +95,6 @@
 
 		// Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
 		silentScroll: function( ypos, elem ) {
-			
-			var elem = elem && elem[ 0 ] || window;
-			
 			if ( $.type( ypos ) !== "number" ) {
 				ypos = $.mobile.defaultHomeScroll;
 			}
@@ -106,7 +103,12 @@
 			$.event.special.scrollstart.enabled = false;
 
 			setTimeout(function() {
-				elem.scrollTo( 0, ypos );
+				if( elem ){
+					elem.scrollTop( ypos );
+				}
+				else{
+					window.scrollTo( 0, ypos );
+				}
 				$( document ).trigger( "silentscroll", { x: 0, y: ypos });
 			}, 20 );
 

js/jquery.mobile.navigation.js

@@ -394,20 +394,28 @@
 			toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
 			screenHeight = getScreenHeight();
 
-		// Scroll to top
-		window.scrollTo( 0, $.mobile.defaultHomeScroll );
+		if( $.support.overflowScrollingTouch && fromPage ){
+			// Send focus to the newly shown page
+			$.mobile.silentScroll( toScroll, toPage );
+		}
+		else{
+			window.scrollTo( 0, $.mobile.defaultHomeScroll );
+		}
 
 		//if the Y location we're scrolling to is less than 10px, let it go for sake of smoothness
-		if( toScroll < $.mobile.minScrollBack ){
+		if( toScroll < $.mobile.minScrollBack && !$.support.overflowScrollingTouch ){
 			toScroll = 0;
 		}
 
 		if( fromPage ) {
 			//trigger before show/hide events
 			fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
 		}
-		toPage
-			.height( screenHeight + toScroll )
+		if( !$.support.overflowScrollingTouch){
+			toPage.height( screenHeight + toScroll );
+		}	
+		
+		toPage	
 			.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
 
 		//clear page loader
@@ -420,15 +428,21 @@
 			promise = th( transition, reverse, toPage, fromPage );
 
 		promise.done(function() {
-			//reset toPage height bac
-			toPage.height( "" );
 
-			// Send focus to the newly shown page
-			reFocus( toPage );
 
-			// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
-			$.mobile.silentScroll( toScroll );
+			if( $.support.overflowScrollingTouch ){
+				$.mobile.silentScroll( toScroll, toPage );
+			}
+			else{
+				//reset toPage height bac
+				toPage.height( "" );
+				
+				// Send focus to the newly shown page
+				reFocus( toPage );
 
+				// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
+				$.mobile.silentScroll( toScroll );
+			}
 			//trigger show/hide events
 			if( fromPage ) {
 				fromPage.height("").data( "page" )._trigger( "hide", null, { nextPage: toPage } );
@@ -445,18 +459,23 @@
 	function getScreenHeight(){
 		var orientation 	= jQuery.event.special.orientationchange.orientation(),
 			port			= orientation === "portrait",
-			winMin			= port ? 480 : 320,
-			screenHeight	= port ? screen.availHeight : screen.availWidth,
+			winMin			= port ? 460 : 300,
+			screenHeight	= port ? document.documentElement.clientHeight || screen.availHeight : screen.availWidth || document.documentElement.clientWidth,
 			winHeight		= Math.max( winMin, $( window ).height() ),
 			pageMin			= Math.min( screenHeight, winHeight );
 
 		return pageMin;
 	}
+	
 
 	//simply set the active page's minimum height to screen height, depending on orientation
 	function resetActivePageHeight(){
-		$( "." + $.mobile.activePageClass ).css( "min-height", getScreenHeight() );
+		$( "." + $.mobile.activePageClass ).css( ( $.support.overflowScrollingTouch ? "height" : "min-height" ), getScreenHeight() );
 	}
+	
+	// TEMP TEMP 
+	$.mobile.getScreenHeight = getScreenHeight;
+	$.mobile.resetActivePageHeight = resetActivePageHeight;
 
 	//shared page enhancements
 	function enhancePage( $page, role ) {
@@ -893,8 +912,8 @@
 		}
 
 		// Set active item's lastScroll prop
-		if( active ){
-			active.lastScroll = $( window ).scrollTop();
+		if( active && fromPage ){
+			active.lastScroll = $( ( $.support.overflowScrollingTouch ? fromPage : window ) ).scrollTop();
 		}
 
 		// Kill the keyboard.

themes/default/jquery.mobile.core.css

@@ -12,7 +12,6 @@
 /* responsive page widths */
 .ui-mobile-viewport {  margin: 0; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
 
-.ui-mobile-overflow-scrolling .ui-mobile-viewport { overflow: hidden; }
 
 /* "page" containers - full-screen views, one should always be in view post-pageload */
 .ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; } 
@@ -34,7 +33,10 @@
 .ui-loader h1 { font-size: 15px; text-align: center; }
 .ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }
 
-.ui-mobile-overflow-scrolling .ui-page { overflow:hidden; -webkit-overflow-scrolling: touch; }
+.ui-mobile-overflow-scrolling .ui-page { overflow: auto; -webkit-overflow-scrolling: touch; }
+
+.ui-mobile-overflow-scrolling .ui-page.ui-mobile-internal-scroll { overflow: hidden; }
+.ui-mobile-overflow-scrolling .ui-page.ui-mobile-internal-scroll .ui-content { overflow: auto; -webkit-overflow-scrolling: touch; }
 
 /*fouc*/
 .ui-mobile-rendering > * { visibility: hidden; }