Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style>
html {
height: 100%;
width: 100%;
/* background contains one extra transparent.gif because we want trick the
contentful paint detection; We want to make sure the background is loaded
before the test starts so we always wait for the contentful paint timestamp
to exist, however, gradient isn't considered as contentful per spec, so Gecko
wouldn't generate a timestamp for it. Hence, we added a transparent gif
to the image list to trick the detection. */
background: url("/assets/www/transparent.gif"),
linear-gradient(135deg, red, white);
overscroll-behavior: auto;
}
body {
width: 100%;
margin: 0px;
padding: 0px;
}
#scroll {
/* set a different overscroll-behavior to make this container different from
the root scrollElement. */
overscroll-behavior: contain auto;
}
</style>
<body>
<div id="scroll" style="width: 100%; height: 100vh; overflow-y: scroll">
<div style="height: 300vh"></div>
</div>
</body>
<script>
document
.getElementById("scroll")
.scrollTo({ top: 50, behavior: "instant" });
</script>
</html>