anchor-scroll-01.html (871B)
1 <!DOCTYPE html> 2 <html class="reftest-no-flush reftest-wait" reftest-no-sync-layers> 3 <style> 4 body { 5 margin: 0; 6 } 7 </style> 8 9 <div style="position: absolute; left: 0; top: 0;"> 10 <div id="scroller" style="position: absolute; overflow: auto; scrollbar-width: none; width: 100px; height: 100px;"> 11 <div style="width: 1px; height: 50px;"></div> 12 <div style="width: 50px; height: 50px; background: blue; anchor-name: --my-anchor;"></div> 13 <div style="width: 1px; height: 500px;"></div> 14 </div> 15 <div style="position: absolute; position-anchor: --my-anchor; width: 50px; height: 50px; background: yellow; left: anchor(right); top: anchor(bottom); position-visibility: always;"> 16 </div> 17 18 19 <script> 20 window.addEventListener("MozReftestInvalidate", async () => { 21 scroller.scrollTop = 5; 22 document.documentElement.classList.remove("reftest-wait"); 23 }); 24 </script> 25 </html>