anchor-scroll-ref.html (1127B)
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="stylesheet" href="/fonts/ahem.css"> 4 <style> 5 body { 6 font: 20px/1 Ahem; 7 margin: 0; 8 } 9 10 #scroll-container { 11 width: 400px; 12 height: 400px; 13 overflow: scroll; 14 } 15 16 #scroll-contents { 17 width: 1000px; 18 height: 1000px; 19 position: relative; 20 } 21 22 #placefiller-above-anchor { 23 height: 500px; 24 } 25 26 #placefiller-before-anchor { 27 display: inline-block; 28 width: 500px; 29 } 30 31 #inner-anchored { 32 color: green; 33 position: fixed; 34 left: 70px; 35 top: 180px; 36 } 37 38 #outer-anchored { 39 color: yellow; 40 position: fixed; 41 left: 70px; 42 top: 220px; 43 } 44 </style> 45 46 <div id="scroll-container"> 47 <div id="scroll-contents"> 48 <div id="placefiller-above-anchor"></div> 49 <div id="placefiller-before-anchor"></div> 50 <span id="anchor">anchor</span> 51 </div> 52 </div> 53 54 <div id="inner-anchored">inner-anchored</div> 55 <div id="outer-anchored">outer-anchored</div> 56 57 <script> 58 const scroller = document.getElementById('scroll-container'); 59 scroller.scrollTop = 300; 60 scroller.scrollLeft = 450; 61 </script>