scroll-handoff.html (1309B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8" /> 4 <meta name="viewport" content="width=device-width, user-scalable=no" /> 5 <style> 6 html { 7 height: 100%; 8 width: 100%; 9 /* background contains one extra transparent.gif because we want trick the 10 contentful paint detection; We want to make sure the background is loaded 11 before the test starts so we always wait for the contentful paint timestamp 12 to exist, however, gradient isn't considered as contentful per spec, so Gecko 13 wouldn't generate a timestamp for it. Hence, we added a transparent gif 14 to the image list to trick the detection. */ 15 background: 16 url("/assets/www/transparent.gif"), linear-gradient(135deg, red, white); 17 overscroll-behavior: auto; 18 } 19 body { 20 width: 100%; 21 margin: 0px; 22 padding: 0px; 23 } 24 #scroll { 25 /* set a different overscroll-behavior to make this container different from 26 the root scrollElement. */ 27 overscroll-behavior: contain auto; 28 } 29 </style> 30 <body> 31 <div id="scroll" style="width: 100%; height: 100vh; overflow-y: scroll"> 32 <div style="height: 300vh"></div> 33 </div> 34 </body> 35 <script> 36 document 37 .getElementById("scroll") 38 .scrollTo({ top: 50, behavior: "instant" }); 39 </script> 40 </html>