public

  • Download Gist
overflow-scroll-iphone.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
<html>
<head>
<title>Overflow test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<style>
body {
padding: 0;
}
#scroller {
overflow-y: scroll;
height: 100%;
}
</style>
</head>
<body>
<div id="scroller">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
tristique iaculis varius. Ut quam elit, scelerisque nec dignissim
ut, euismod ut mauris. Proin interdum, sapien eu tincidunt placerat,
nibh metus luctus ligula, at porttitor justo urna nec est. Praesent
tristique tortor a sapien convallis ut vehicula nibh cursus. Nam
porta sem at mi gravida iaculis. Nullam sodales rhoncus risus sed
tempor. Vivamus non turpis sed erat convallis gravida. Vestibulum
volutpat adipiscing pulvinar. Sed elementum dictum pharetra. Nunc eu
nisl vel nibh gravida hendrerit in aliquam metus. Aliquam adipiscing
fringilla nisl sed commodo. Nullam quam neque, ullamcorper vel
rhoncus sed, facilisis non dui. In hac habitasse platea dictumst.
Mauris malesuada dictum laoreet. In viverra nulla et nibh tempus
eleifend. Aliquam et libero odio. Nullam vel tortor nunc. Sed ac
eros sem, non feugiat nunc.
</p>
<p>
Mauris nisl nunc, vehicula et aliquam in, pretium condimentum
tortor. Sed non odio enim, eget aliquet nunc. Vestibulum volutpat,
tortor ac tempus consequat, sem massa volutpat risus, quis ultricies
nulla nibh ut turpis. Cras vestibulum, dui a consectetur dapibus,
lectus mauris suscipit sapien, ac porta velit dui eu quam. Aliquam
faucibus placerat justo, in tincidunt risus ornare eu. Donec a nisl
vel odio aliquam aliquet a ut neque. Sed tempor auctor nulla et
ullamcorper. Curabitur sit amet metus lacus. Cras justo tellus,
consequat vel imperdiet et, scelerisque eget turpis. Sed congue,
nunc non vestibulum fringilla, nibh massa vestibulum eros, nec
vulputate tellus libero nec magna. Cras a diam a orci tincidunt
interdum ullamcorper ac sapien.
</p>
<video src="http://double.co.nz/video_test/transformers480.ogg" width="320" controls="true"></video>
</div>
<script>
var y;
document.querySelector('#scroller').addEventListener('touchstart', function(event){
event.preventDefault();
y = event.touches[0].pageY;
}, false);
document.querySelector('#scroller').addEventListener('touchmove', function(event){
event.preventDefault();
var scrollOffset = event.touches[0].pageY - y;
this.scrollTop = -(scrollOffset + -this.scrollTop);
y = event.touches[0].pageY;
}, true);
document.querySelector('#scroller').addEventListener('touchend', function(event){
event.preventDefault();
}, false);
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.