anchor-scroll-position-try-012.html (1276B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Tests position fallback change on scroll with anchor and anchored under the same scroll container</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 6 <link rel="match" href="anchor-scroll-position-try-012-ref.html"> 7 <style> 8 #scroller { 9 position: relative; 10 width: 400px; 11 height: 400px; 12 overflow-y: scroll; 13 } 14 15 .box { 16 min-height: 100px; 17 width: 100px; 18 } 19 20 #anchor { 21 anchor-name: --a; 22 background: orange; 23 } 24 25 #anchored { 26 position: absolute; 27 top: anchor(bottom); 28 width: 100px; 29 height: 100px; 30 background: green; 31 position-anchor: --a; 32 position-try-fallbacks: --pf; 33 } 34 35 @position-try --pf { 36 top: auto; 37 bottom: anchor(top); 38 } 39 </style> 40 41 <div id="scroller"> 42 <div class="box"></div> 43 <div class="box"></div> 44 <div class="box"></div> 45 <div class="box" id="anchor"></div> 46 <div class="box"></div> 47 <div class="box"></div> 48 <div class="box"></div> 49 <div class="box"></div> 50 <div id="anchored"></div> 51 </div> 52 53 <script> 54 requestAnimationFrame(() => { 55 requestAnimationFrame(() => { 56 scroller.scrollTop = 250; 57 document.documentElement.classList.remove('reftest-wait'); 58 }); 59 }); 60 </script> 61 </html>