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