Created
July 6, 2012 11:08
-
-
Save i2r/3059588 to your computer and use it in GitHub Desktop.
Touch Scrolling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Touch Scrolling | |
| */ | |
| html, body { | |
| min-height: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| -webkit-overflow-scrolling: none; | |
| } | |
| .box { | |
| overflow: auto; | |
| height: 25%; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .box_static { | |
| background: linear-gradient(45deg, #f06, yellow); | |
| } | |
| .box_relative { | |
| position: relative; | |
| background: linear-gradient(135deg, #f06, green); | |
| } | |
| .box_absolute { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(-135deg, #f06, yellow); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- content to be placed inside <body>…</body> --> | |
| <div id="static" class="box box_static"> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| </div> | |
| <div class="box box_relative"> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| </div> | |
| <div class="box box_absolute"> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| Text inside<br> | |
| </div> | |
| <script> | |
| document.ontouchmove = function(event){ | |
| event.preventDefault(); | |
| } | |
| document.getElementById('static').ontouchmove = function(e) { | |
| e.stopPropagation(); | |
| }; | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment