anchor-scope-scroll.html (1013B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Anchor Positioning: scroll transforms respect anchor-scope</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-scope"> 5 <link rel="help" href="https://issues.chromium.org/issues/380234225"> 6 <link rel="match" href="anchor-scope-scroll-ref.html"> 7 <style> 8 #scroller { 9 width: 200px; 10 height: 200px; 11 overflow-y: hidden; 12 border: 1px solid black; 13 } 14 15 #item { 16 anchor-scope: --item; 17 anchor-name: --item; 18 height: 50px; 19 background: lightgray; 20 } 21 22 #anchored { 23 position-anchor: --item; 24 position: absolute; 25 background: skyblue; 26 right: anchor(right); 27 top: anchor(top); 28 width: 50px; 29 height: 50px; 30 } 31 32 .spacer { 33 height: 150px; 34 } 35 </style> 36 <div id=scroller> 37 <div class=spacer></div> 38 <div id=item> 39 <b id=anchored></b> 40 </div> 41 <div class=spacer></div> 42 </div> 43 <!-- This element should *not* affect scroll transforms for #anchored: --> 44 <div style="anchor-name: --item"></div> 45 <script> 46 scroller.scrollTop = 50; 47 </script> 48 </html>