anchor-scroll-001.html (1505B)
1 <!DOCTYPE html> 2 <title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled</title> 3 <link rel="author" href="mailto:xiaochengh@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 5 <link rel="match" href="reference/anchor-scroll-ref.html"> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <style> 8 body { 9 font: 20px/1 Ahem; 10 margin: 0; 11 } 12 13 #scroll-container { 14 width: 400px; 15 height: 400px; 16 overflow: scroll; 17 } 18 19 #scroll-contents { 20 width: 1000px; 21 height: 1000px; 22 position: relative; 23 } 24 25 #placefiller-above-anchor { 26 height: 500px; 27 } 28 29 #placefiller-before-anchor { 30 display: inline-block; 31 width: 500px; 32 } 33 34 #anchor { 35 anchor-name: --anchor; 36 } 37 38 #inner-anchored { 39 color: green; 40 position: absolute; 41 left: anchor(left); 42 bottom: anchor(top); 43 position-anchor: --anchor; 44 } 45 46 #outer-anchored { 47 color: yellow; 48 position: absolute; 49 left: anchor(left); 50 top: anchor(bottom); 51 position-anchor: --anchor; 52 } 53 </style> 54 55 <div style="position: relative"> 56 <div id="scroll-container"> 57 <div id="scroll-contents"> 58 <div id="placefiller-above-anchor"></div> 59 <div id="placefiller-before-anchor"></div> 60 <span id="anchor">anchor</span> 61 <div id="inner-anchored">inner-anchored</div> 62 </div> 63 </div> 64 <div id="outer-anchored">outer-anchored</div> 65 </div> 66 67 <script> 68 const scroller = document.getElementById('scroll-container'); 69 scroller.scrollTop = 300; 70 scroller.scrollLeft = 450; 71 </script>