Skip to content

Instantly share code, notes, and snippets.

@bjrn

bjrn/scrollfix.html

Created February 1, 2012 21:54
Show Gist options
  • Save bjrn/1719717 to your computer and use it in GitHub Desktop.
Save bjrn/1719717 to your computer and use it in GitHub Desktop.
Download ZIP
IOS Webkit - native internal scroll - a fix for the document page-bounce
Raw
scrollfix.html
<!DOCTYPE html>
<html>
<!-- NOTES
Demo - uses IOS native scroll available in IOS5, but sidestep the document-bounce behavior.
another take on the solution first seen here: https://gist.github.com/1372229
https://github.com/joelambert/ScrollFix/issues/2
Tested on iPad 2, using IOS 5.0.1.
this solution does not require javascript or setting explicit heights on panels,
but uses flex-box layout for filling up available height.
the classes .vflex and .scrolling are added to the html structure for clarity
We need a wrapper (in this example .master and .detail) which are flex-boxed and given overflow-scrolling:touch.
the same goes for the .panel element.
.panel-content gets margin-bottom:-1px which seems to kill the page bounce for the document.
-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>ios webkit native scroll test</title>
<style>
body,ul,li { padding:0; margin:0; border:0; }
body,button { font-family: Helvetica, Arial, sans-serif; font-size:16px; }
html,body {
height:100%;
/*fixes the page-bounce on desktop safari. tested on version 5.1 / mac */
overflow:hidden;
}
ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
padding:10px;
line-height:30px;
border-bottom:1px solid #999;
border-top:1px solid #fff;
font-size:26px;
}
.toolbar {
border:1px solid #999;
padding:10px;
}
header, footer {
height:45px;
line-height:45px;
background:#444;
color:#ccc;
padding:0 10px;
}
footer {
position:absolute;
right:0;
bottom:0;
left:0;
}
.vflex {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
-webkit-box-flex:1;
}
.scrolling {
-webkit-overflow-scrolling: touch;
overflow:auto;
}
.app {
position:absolute;
top:45px;
bottom:45px;
left:0;
right:0;
background:#999;
}
.master {
background:#eee;
position:absolute;
top:0;
width:320px;
bottom:0;
left:0;
/* gets .vflex + .scrolling */
}
.detail {
background:#eee;
position:absolute;
top:0;
right:0;
bottom:0;
left:321px;
/* gets .vflex + .scrolling */
}
.panel {
background:#fff;
/* gets .vflex + .scrolling */
}
/* this adds the extra pixel that's neccessary if the content is < panel height */
.panel-content {
background:#fff;
margin-bottom:-1px;
/* gets .vflex */
}
</style>
</head>
<body>
<header>Header</header>
<div class="app">
<div class="master vflex scrolling">
<div class="toolbar">
<button type="button" id="btn-toggle">Show/Hide more lines below</button>
</div>
<div class="panel vflex scrolling">
<div class="panel-content vflex">
<ul>
<li>Scrolling up/down on the toolbar and header above will cause the rubber band effect to appear</li>
</ul>
<ul id="longlist" style="display:none">
<li>Second line</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco</li>
<li>laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</li>
<li>deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco</li>
<li>laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</li>
<li>deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco</li>
<li>laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</li>
<li>deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco</li>
<li>laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</li>
<li>deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco</li>
<li>laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</li>
<li>deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco</li>
<li>laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</li>
<li>deserunt mollit anim id est laborum.</li>
<li>Last line</li>
</ul>
</div>
</div>
</div>
<div class="detail vflex scrolling">
<div class="panel vflex scrolling">
<div class="panel-content vflex">
<ul>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>My Stuff random filler somewhat, somwhat random</li>
<li> v9 ... somewhat random filler random somewhat filler </li>
<li>More Stuff somewhat random filler som random filler </li>
<li>Big Stuff somewhat random filler somewhat, random </li>
<li>LAST My Stuff random filler somewhat, somwhat random</li>
</ul>
</div>
</div>
</div>
</div>
<footer id="footer">
This footer has preventDefault set on touchmove
</footer>
<script>
document.getElementById("footer").addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
document.getElementById("btn-toggle").addEventListener('click', function(e) {
var list = document.getElementById('longlist');
list.style.display = (list.style.display=='block') ? 'none':'block';
}, false);
</script>
</body>
</html>
@dmcquillan314
Copy link

Just something I noticed about this when I was implementing this solution on my app. If you have display: block; on any of the container divs with the master scrolling divs then it will break the page scrolling. It took me about 3 hours+ to figure that out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment