anchor-scroll-chained-002.html (1214B)
1 <!DOCTYPE html> 2 <title>Tests scroll adjustments of element anchored to another anchored element</title> 3 <link rel="author" href="mailto:wangxianzhu@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 5 <link rel="match" href="reference/anchor-scroll-chained-002-ref.html"> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 div { 12 width: 100px; 13 height: 100px; 14 } 15 16 #scroller1 { 17 width: 200px; 18 height: 200px; 19 position: relative; 20 } 21 22 #scroller1,#scroller2 { 23 overflow: scroll; 24 } 25 26 #anchor { 27 anchor-name: --a1; 28 height: 20px; 29 background: orange; 30 } 31 32 #anchored1 { 33 position: absolute; 34 position-anchor: --a1; 35 left: anchor(left); 36 top: anchor(bottom); 37 background: green; 38 anchor-name: --a2; 39 } 40 41 #anchored2 { 42 position: absolute; 43 position-anchor: --a2; 44 left: anchor(left); 45 top: anchor(bottom); 46 background: lime; 47 } 48 49 </style> 50 51 <div id="scroller1"> 52 <div style="height: 100px"></div> 53 <div id="scroller2"> 54 <div style="height: 230px"></div> 55 <div id="anchor"></div> 56 <div style="height: 230px"></div> 57 </div> 58 <div style="height: 100px"></div> 59 <div id="anchored1"></div> 60 </div> 61 <div id="anchored2"></div> 62 63 <script> 64 scroller1.scrollTop = 80; 65 scroller2.scrollTop = 200; 66 </script>