fixed-pos-scrolled-clip-3-ref.html (855B)
1 <!DOCTYPE html> 2 <html> 3 4 <title>Reference for: like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title> 5 6 <style> 7 8 body { 9 margin: 0; 10 height: 4000px; 11 } 12 13 .subframe { 14 position: relative; 15 left: 10px; 16 top: 10px; 17 width: 500px; 18 height: 600px; 19 overflow: auto; 20 box-shadow: 0 0 0 2px black; 21 } 22 23 .scrolled { 24 height: 4000px; 25 } 26 27 .greenSquare { 28 position: absolute; 29 top: 300px; 30 left: 100px; 31 width: 200px; 32 height: 200px; 33 background: lime; 34 } 35 36 </style> 37 38 <div class="subframe"> 39 <div class="scrolled"> 40 <div class="greenSquare"></div> 41 </div> 42 </div> 43 44 <script> 45 46 document.documentElement.scrollTop = 20; 47 document.querySelector('.subframe').scrollTop = 200; 48 49 </script>