updated to support ios touch-overflow

css/main.css

@@ -249,6 +249,13 @@ textarea {
 	margin-right: 20px;
 }
 
+#content-scroller {
+	overflow: scroll;
+	-webkit-overflow-scrolling: touch;
+	width:100%;
+	height:200px;
+}
+
 article h2 {
 	background-color: #D8D8CA;
 	width: 100%;

index.html

@@ -70,13 +70,17 @@ <h3>SOMETHING<del></del></h3>
 
 		</header>
 
-        <article>
-			<img src="img/squirrel.jpg" alt="Squirrel">
-			<h2>SQUIRREL SAYS HELLO</h2>
-			<p>This is an example of a menu that slides down from the top with a swiping motion. The idea was taken from CNN's iPhone app. I tried to model the interaction as close as I could using Javascript and CSS3.</p>
-			<p><strong>Note:</strong> This is one of thoose demos that really only shines in a hybrid container. I have included a config.xml file that you can modify to use with Phonegap Build. In order for it to work smoothly it is important to disable the bouncing nature of the UIWebView. My config.xml file contains the neccessary line to disable it.</p>
-			<p><cite>Example by <a href="http://www.tegdesign.com">Tegan Snyder</a></cite></p>
-		</article>
+		<div id="content-scroller">
+
+	        <article>
+				<img src="img/squirrel.jpg" alt="Squirrel">
+				<h2>SQUIRREL SAYS HELLO</h2>
+				<p>This is an example of a menu that slides down from the top with a swiping motion. The idea was taken from CNN's iPhone app. I tried to model the interaction as close as I could using Javascript and CSS3.</p>
+				<p><strong>Note:</strong> This is one of thoose demos that really only shines in a hybrid container. I have included a config.xml file that you can modify to use with Phonegap Build. In order for it to work smoothly it is important to disable the bouncing nature of the UIWebView. My config.xml file contains the neccessary line to disable it.</p>
+				<p><cite>Example by <a href="http://www.tegdesign.com">Tegan Snyder</a></cite></p>
+			</article>
+
+		</div>
 
         <script src="js/vendor/zepto.min.js"></script>
 		<script src="js/main.js"></script>

js/main.js

@@ -9,6 +9,10 @@ Zepto(function($){
 	* @menu_btns_container : the container for the default mini-button navigation
 	*
 	*/
+
+	// dynamically set content-scroller height
+
+	$('#content-scroller').height(viewport().height);
 
 	$('#puller').swipeslide({
 		min_move_y: Math.abs(parseInt($('#swipemenu nav').css('top').split('px')[0], 10)),
@@ -18,4 +22,15 @@ Zepto(function($){
 		menu_btns_container: 'aside'
 	});
 
-});
+
+});
+
+function viewport(){
+	var e = window;
+	var a = 'inner';
+	if (!('innerWidth' in window)) {
+		a = 'client';
+		e = document.documentElement || document.body;
+	}
+	return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
+}

js/swipeslide.min.js

@@ -175,6 +175,8 @@
 
 				$(config.swipe_menu).css('top', '319px');
 				$(config.swipe_menu + ' ' + config.nav_container).css('top', '-319px');
+
+				document.addEventListener('scroll', onScroll, false);
 
 			}