anchor-scroll-scrollable-anchor.html (1169B)
1 <!DOCTYPE html> 2 <meta name="fuzzy" content="1;0-50"> 3 <title>Basic of anchor positioned scrolling: scroll of a scrollable anchor should not affect anchor positioning</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 5 <link rel="match" href="anchor-scroll-scrollable-anchor-ref.html"> 6 <style> 7 #scroll-container { 8 width: 400px; 9 height: 400px; 10 overflow: scroll; 11 will-change: scroll-position; 12 } 13 14 #scroll-contents { 15 width: 1000px; 16 height: 1000px; 17 position: relative; 18 } 19 20 .placefiller { 21 height: 500px; 22 } 23 24 #anchor { 25 anchor-name: --anchor; 26 height: 100px; 27 width: 100px; 28 overflow: scroll; 29 will-change: scroll-position; 30 } 31 32 #anchored { 33 background: green; 34 position: absolute; 35 width: 100px; 36 height: 100px; 37 left: anchor(left); 38 bottom: anchor(top); 39 position-anchor: --anchor; 40 } 41 </style> 42 43 <div id="scroll-container"> 44 <div id="scroll-contents"> 45 <div class="placefiller"></div> 46 <div id="anchor"> 47 <div class="placefiller"></div> 48 </div> 49 </div> 50 </div> 51 <div id="anchored"></div> 52 53 <script> 54 document.getElementById('scroll-container').scrollTop = 300; 55 document.getElementById('anchor').scrollTop = 300; 56 </script>