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