anchor-scroll-chained-004.html (1454B)
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-004-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,#scroller3 { 23 overflow: scroll; 24 } 25 26 #anchor1 { 27 anchor-name: --a1; 28 height: 20px; 29 background: orange; 30 } 31 32 #anchor2 { 33 anchor-name: --a2; 34 height: 20px; 35 background: cyan; 36 } 37 38 #anchored1 { 39 position: absolute; 40 position-anchor: --a1; 41 left: anchor(left); 42 top: anchor(bottom); 43 background: green; 44 } 45 46 #anchored2 { 47 position: absolute; 48 position-anchor: --a2; 49 left: anchor(left); 50 top: anchor(bottom); 51 background: lime; 52 } 53 54 </style> 55 56 <div id="scroller1"> 57 <div style="height: 100px"></div> 58 <div id="scroller2"> 59 <div style="height: 230px"></div> 60 <div id="anchor1"></div> 61 <div style="height: 230px"></div> 62 </div> 63 <div style="height: 100px"></div> 64 <div id="anchored1"> 65 <div id="scroller3"> 66 <div style="height: 230px"></div> 67 <div id="anchor2"></div> 68 <div style="height: 230px"></div> 69 </div> 70 </div> 71 </div> 72 <div id="anchored2"></div> 73 74 <script> 75 scroller1.scrollTop = 80; 76 scroller2.scrollTop = 200; 77 scroller3.scrollTop = 200; 78 </script>