position-sticky-overflow-clip-container-ref.html (635B)
1 <!DOCTYPE html> 2 <html> 3 <title>Sticky elements should not consider overflow: clip containers as possible scroll ancestor</title> 4 <style> 5 body { 6 margin: 0; 7 overflow: hidden; /* hide scrollbars */ 8 } 9 10 #container { 11 height: 300px; 12 overflow-y: scroll; 13 } 14 15 #overflowClipContainer { 16 overflow: visible; 17 height: 600px; 18 } 19 20 #sticky { 21 position: sticky; 22 top: 0; 23 height: 50px; 24 background-color: yellow; 25 } 26 </style> 27 <script> 28 function doTest() 29 { 30 container.scrollTo(0, 50); 31 } 32 window.addEventListener('load', doTest, false); 33 </script> 34 <div id="container"> 35 <div id="overflowClipContainer"> 36 <div id="sticky"></div> 37 </div> 38 </div>