Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<style>
html, body, #container {
width: 100%;
height: 100%;
}
#spacer {
width: 200%;
height: 200%;
}
</style>
<div id="container">
<div id="spacer"></div>
<button>Element To Scroll</button>
</div>
<script>
window.addEventListener('message', onMessageReceived);
function scrollingElementBounds() {
var rect = document.querySelector("button").getBoundingClientRect();
return {
x: rect.x, y: rect.y, width: rect.width, height: rect.height
};
}
function onMessageReceived(e) {
if (!e.data || !e.data.type)
return;
switch(e.data.type) {
case "scroll":
document.querySelector("button").scrollIntoView({behavior: "instant"});
ackMessage({bounds: scrollingElementBounds()}, e.source);
break;
case "scrolling-element-bounds":
ackMessage({bounds: scrollingElementBounds()}, e.source);
break;
}
}
function ackMessage(msg, source) {
source.postMessage(msg, "*");
}
</script>