position-sticky-fixed-ancestor-iframe-ref.html (1677B)
1 <!DOCTYPE html> 2 <title>Sticky elements inside fixed ancestors and iframe shouldn't account for scroll</title> 3 4 <style> 5 body,html { 6 margin: 0; 7 width: 100%; 8 height: 100%; 9 } 10 11 iframe { 12 margin: 10px; 13 width: 90%; 14 height: 90%; 15 border: 1px solid black; 16 } 17 18 .spacer { 19 height: 120vh; 20 } 21 </style> 22 23 <div class="spacer"></div> 24 <iframe srcdoc=" 25 <!DOCTYPE html> 26 <title>Reference for sticky elements inside fixed ancestors shouldn't account for scroll</title> 27 <style> 28 body,html { 29 margin: 0; 30 width: 100%; 31 height: 100%; 32 } 33 34 .sticky { 35 background: green; 36 width: 100px; 37 height: 10%; 38 } 39 40 .spacer { 41 height: calc(25vh - 10%); 42 } 43 .long { 44 height: 600vh; 45 } 46 47 .position-parent { 48 position: absolute; 49 display: flex; 50 align-items: center; 51 justify-content: center; 52 width: 100%; 53 height: 100%; 54 top: 100vh; 55 background-color: lightgrey; 56 } 57 58 .container { 59 width: 100px; 60 height: 100%; 61 background-color: grey; 62 } 63 64 button { 65 position: fixed; 66 left: 20px; 67 top: 20px; 68 } 69 70 .fixed { 71 position: fixed; 72 top: 25vh; 73 } 74 </style> 75 76 <div class='position-parent fixed'> 77 <div class='container'> 78 <div class='spacer'></div> 79 <div class='sticky'></div> 80 </div> 81 </div> 82 <div class='long'></div> 83 <button id='button'>Toggle Fixed</button> 84 <script> 85 window.scrollTo(0, document.querySelector('.long').clientHeight); 86 </script> 87 "></iframe> 88 <div class="spacer"></div> 89 90 <script> 91 const child = document.querySelector('iframe'); 92 child.scrollIntoView(); 93 </script>