| <!DOCTYPE html> |
| <style> |
| #iframe { |
| display: block; |
| width: 100%; |
| height: 100px; |
| } |
| #scrollable { |
| position: relative; |
| overflow: auto; |
| height: 100px; |
| } |
| #shapeshifter { |
| position: relative; |
| overflow: auto; |
| height: 100px; |
| } |
| @media print { |
| #shapeshifter { |
| display: flex; |
| overflow: visible; |
| } |
| |
| #shapeshifter * { |
| display: none; |
| } |
| } |
| </style> |
| <iframe id="iframe" src="iframe-with-square.html"></iframe> |
| <div id="scrollable"> |
| <script> |
| for (var i = 0; i < 200; i++) |
| document.write("filler "); |
| </script> |
| <div id="scrollabletarget" style="width:100px; height:100px; background:green;"></div> |
| <script> |
| for (var i = 0; i < 200; i++) |
| document.write("filler "); |
| </script> |
| </div> |
| <div id="shapeshifter"> |
| <script> |
| for (var i = 0; i < 200; i++) |
| document.write("filler "); |
| </script> |
| <div id="shapeshiftertarget" style="width:100px; height:100px; background:green;"></div> |
| <script> |
| for (var i = 0; i < 200; i++) |
| document.write("filler "); |
| </script> |
| </div> |
| |
| <script> |
| onload = function() { |
| var scroll = iframe.contentWindow.document.getElementById("target").offsetTop; |
| iframe.contentWindow.scrollTo(0, scroll); |
| scrollable.scrollTop = scrollabletarget.offsetTop; |
| shapeshifter.scrollTop = shapeshiftertarget.offsetTop; |
| } |
| </script> |
