Skip to content

Instantly share code, notes, and snippets.

@ufologist

ufologist/body-ovh-on-mobile-device.html

Created June 3, 2016 07:38
Show Gist options
  • Save ufologist/ac1dfa6fa6192a5879e9d9dcdbd0bf54 to your computer and use it in GitHub Desktop.
Save ufologist/ac1dfa6fa6192a5879e9d9dcdbd0bf54 to your computer and use it in GitHub Desktop.
Download ZIP
body overflow:hidden on mobile device
Raw
body-ovh-on-mobile-device.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body overflow:hidden on mobile device</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
/* elements which are positioned absolutely. */
/* Their ultimate offset parent is the viewport */
/* prevents those elements from breaking out of the body box. */
body {
position: relative;
}
</style>
</head>
<body style="overflow:hidden;">
<p>But you can work around it by making the body element itself, not the viewport, hide its overflow.</p>
<p>There is one final gotcha to watch out for: the body itself must not be larger than the viewport.</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p style="position: absolute; top: 1000px;">lorem</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment