Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<body>
<style>
* {
scroll-behavior: smooth;
}
.scroller {
overflow-y: scroll;
height: 200px;
width: 200px;
background-color: teal;
border: solid 1px black;
position: relative;
display: inline-block;
}
.space {
height: 200vh;
width: 200vw;
}
.box {
height: 50px;
width: 50px;
background-color: purple;
}
.target {
position: absolute;
top: 150%;
}
</style>
<div id="fragment_scroll_container" class="scroller">
<div class="space"></div>
<div class="box target" id="fragment_scroll_target">target</div>
</div>
<div id="scrollintoview_container" class="scroller">
<div class="space"></div>
<div class="box target" id="scrollintoview_target"></div>
</div>
<a id="fragment_link" href="#fragment_scroll_target">Scroll To Fragment</a>
</style>
<script>
const fragment_scroll_container =
document.getElementById("fragment_scroll_container");
const scrollintoview_container =
document.getElementById("scrollintoview_container");
const scrollintoview_target =
document.getElementById("scrollintoview_target");
const parent = window.parent;
// Post a message to the parent frame when the scroll ends to the test can
// proceed.
scrollintoview_container.addEventListener("scrollend", () => {
parent.postMessage("ready");
}, { once: true });
// Start a scroll on the scrollintoview container as soon as we start
// scrolling the fragment's container.
fragment_scroll_container.addEventListener("scroll", () => {
scrollintoview_target.scrollIntoView({ behavior: "smooth" });
}, { once: true });
</script>
</body>
</html>