63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<!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>
|