anchor-center-scroll.html (865B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: scroll adjusted anchor-center</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center"> 4 <link rel="match" href="anchor-center-scroll-ref.html"> 5 <style> 6 body { margin: 0; } 7 #scroller { 8 width: 400px; 9 height: 400px; 10 overflow: auto; 11 background: orange; 12 } 13 #anchor { 14 margin-top: 100px; 15 width: 100px; 16 height: 100px; 17 background: pink; 18 anchor-name: --anchor; 19 } 20 #anchored { 21 position: absolute; 22 position-anchor: --anchor; 23 align-self: anchor-center; 24 width: 50px; 25 height: 50px; 26 background: purple; 27 } 28 #filler { height: 1000px; } 29 </style> 30 <div id="scroller"> 31 <div id="anchor"></div> 32 <div id="anchored"></div> 33 <div id="filler"></div> 34 </div> 35 <script> 36 scroller.offsetTop; 37 scroller.scrollTop = 100; 38 </script>