overflow-009.html (1888B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test (Overflow): body with overflow:hidden</title> 6 <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> 7 <link rel="help" href="https://www.w3.org/TR/CSS2/visufx.html#overflow"> 8 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow"> 9 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#propdef-overflow"> 10 <meta name="flags" content="interact"> 11 <meta name="assert" content="position:fixed layer should not be able to cause scrolling of body styled as overflow:hidden"> 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 <style> 14 body { 15 /* what we're testing */ 16 overflow: hidden; 17 } 18 h1 { 19 /* bottom of #overlay-inner */ 20 position: absolute; 21 bottom: 0; 22 left: 0; 23 } 24 .margin-0 { 25 /* remove extra space */ 26 margin: 0; 27 } 28 .tall { 29 height: 100vh; 30 width: 100%; 31 } 32 #bad { 33 background-color: red; 34 } 35 #overlay { 36 overflow: auto; 37 position: fixed; 38 top: 0; 39 right: 0; 40 bottom: 0; 41 left: 0; 42 } 43 #overlay-inner { 44 position: relative;/* needed for the h1 */ 45 width: 60%;/* leave room for #bad to be visible */ 46 height: 150vh;/* force scroll */ 47 /* make this visually distinct */ 48 background-color: blue; 49 color: white; 50 } 51 </style> 52 </head> 53 <body class="margin-0"> 54 <div id="overlay"> 55 <div id="overlay-inner"> 56 <ol class="margin-0"> 57 <li>Scroll the blue square downward until you see the word "BOTTOM".</li> 58 <li>End your scrolling action/gesture. (e.g. Remove your finger from the touchscreen.)</li> 59 <li>Attempt to scroll the blue square further downward.</li> 60 <li>If you see any red, then the test result is FAILED. Otherwise, it is PASSED.</li> 61 </ol> 62 <h1 class="margin-0">BOTTOM</h1> 63 </div> 64 </div> 65 <div class="tall"></div> 66 <div id="bad" class="tall"></div> 67 </body> 68 </html>