scroll-margin-propagation-iframe-1.html (825B)
1 <!DOCTYPE html> 2 3 <script src="/common/get-host-info.sub.js"></script> 4 5 <p>Iframe 1</p> 6 7 <div style="width: 300px; height: 300px; overflow-y: scroll; outline: 1px red solid" id="scroller"> 8 <!-- Spacer to trigger scrolling --> 9 <div style="height: 400px"></div> 10 11 <iframe id="iframe" width=250 height=300></iframe> 12 </div> 13 14 <script> 15 iframe.src = get_host_info().ORIGIN + "/intersection-observer/resources/scroll-margin-propagation-iframe-2.html"; 16 17 window.addEventListener("message", event => { 18 const data = event.data; 19 20 if (data.msgName === "setScrollTop") { 21 if (data.target === "iframe1") { 22 scroller.scrollTop = data.scrollTop; 23 window.top.postMessage({ msgName: "scrollEnd", source: "iframe1" }, "*"); 24 } else 25 iframe.contentWindow.postMessage(data, "*"); 26 } 27 }); 28 </script>