anchor-scroll-scrollable-anchor-ref.html (694B)
1 <!DOCTYPE html> 2 <style> 3 #scroll-container { 4 width: 400px; 5 height: 400px; 6 overflow: scroll; 7 } 8 9 #scroll-contents { 10 width: 1000px; 11 height: 1000px; 12 position: relative; 13 } 14 15 #anchor { 16 anchor-name: --anchor; 17 height: 100px; 18 width: 100px; 19 overflow: scroll; 20 } 21 22 #anchored { 23 background: green; 24 width: 100px; 25 height: 100px; 26 } 27 </style> 28 29 <div id="scroll-container"> 30 <div id="scroll-contents"> 31 <div style="height: 400px"></div> 32 <div id="anchored"></div> 33 <div id="anchor"> 34 <div style="height: 500px"></div> 35 </div> 36 </div> 37 </div> 38 39 <script> 40 document.getElementById('scroll-container').scrollTop = 300; 41 document.getElementById('anchor').scrollTop = 300; 42 </script>