pull-to-refresh-subframe.html (2131B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta 6 name="viewport" 7 content="height=device-height,width=device-width,initial-scale=1.0" 8 /> 9 <style type="text/css"> 10 html, 11 body { 12 width: 100%; 13 height: 100%; 14 margin: 0; 15 padding: 0; 16 /* background contains one extra transparent.gif because we want trick the 17 contentful paint detection; We want to make sure the background is loaded 18 before the test starts so we always wait for the contentful paint timestamp 19 to exist, however, gradient isn't considered as contentful per spec, so Gecko 20 wouldn't generate a timestamp for it. Hence, we added a transparent gif 21 to the image list to trick the detection. */ 22 background: 23 url("/assets/www/transparent.gif"), 24 linear-gradient(135deg, red, white); 25 } 26 27 .container { 28 width: 100%; 29 height: 25%; 30 overflow: scroll; 31 } 32 33 .subframe { 34 width: 100%; 35 height: 100vh; 36 } 37 38 #one > .subframe { 39 background-color: red; 40 } 41 42 #two > .subframe { 43 background-color: green; 44 } 45 46 #three > .subframe { 47 background-color: blue; 48 } 49 50 #four > .subframe { 51 background-color: yellow; 52 } 53 </style> 54 </head> 55 <body> 56 <div id="one" class="container"> 57 <div class="subframe"></div> 58 </div> 59 <div id="two" class="container"> 60 <div class="subframe"></div> 61 </div> 62 <div id="three" class="container"> 63 <div class="subframe"></div> 64 </div> 65 <div id="four" class="container"> 66 <div class="subframe"></div> 67 </div> 68 </body> 69 <script> 70 document 71 .getElementById("three") 72 .scrollTo({ top: 200, behavior: "instant" }); 73 74 document.getElementById("four").addEventListener("touchstart", () => { 75 console.log("not preventing default"); 76 }); 77 78 document.getElementById("two").addEventListener("touchstart", e => { 79 console.log("preventing default"); 80 e.preventDefault(); 81 }); 82 </script> 83 </html>