<!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>
