bytespider/overflow-scroll-iphone.html

## overflow-scroll-iphone.html
<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>
	<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>