45 lines
1,002 B
HTML
45 lines
1,002 B
HTML
<!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>
|