anchor-scroll-nested-ref.html (1439B)
1 <!DOCTYPE html> 2 <title>Tests anchor positioned scrolling with nested scroll containers</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 6 <style> 7 body { 8 margin: 0; 9 width: 1500px; 10 height: 1500px; 11 position: relative; 12 } 13 14 #outer-scroller { 15 margin: 500px; 16 width: 350px; 17 height: 350px; 18 outline: 1px solid black; 19 overflow: scroll; 20 } 21 22 #inner-scroller { 23 margin: 100px; 24 width: 250px; 25 height: 250px; 26 outline: 1px solid black; 27 overflow: scroll; 28 } 29 30 #anchor { 31 margin: 200px; 32 width: 50px; 33 height: 50px; 34 background-color: green; 35 } 36 37 .anchored { 38 position: fixed; 39 width: 50px; 40 height: 50px; 41 left: 250px; 42 } 43 44 .above { 45 top: 200px; 46 background-color: red; 47 } 48 49 .below { 50 top: 300px; 51 background-color: yellow; 52 } 53 </style> 54 55 <div id="outer-scroller"> 56 <div id="inner-scroller"> 57 <div id="anchor"></div> 58 <div class="anchored above"></div> 59 </div> 60 </div> 61 62 <div class="anchored below"></div> 63 64 <script> 65 document.documentElement.scrollTop = 400; 66 document.documentElement.scrollLeft = 400; 67 68 let outerScroller = document.getElementById('outer-scroller'); 69 outerScroller.scrollTop = 50; 70 outerScroller.scrollLeft = 50; 71 72 let innerScroller = document.getElementById('inner-scroller'); 73 innerScroller.scrollTop = 100; 74 innerScroller.scrollLeft = 100; 75 </script>