position-sticky-grid-ref.html (1837B)
1 <!DOCTYPE html> 2 <title>Reference for position:sticky elements should work correctly with grid layout</title> 3 4 <style> 5 .scroller { 6 position: relative; 7 overflow-x: scroll; 8 overflow-y: hidden; 9 width: 300px; 10 height: 100px; 11 margin-bottom: 15px; 12 } 13 14 .grid-container { 15 display: grid; 16 grid-template-columns: 25% 25% 25% 25%; 17 grid-template-rows: 100%; 18 width: 400px; 19 height: 90px; 20 } 21 22 .green { 23 background-color: green; 24 } 25 26 .grid-item { 27 width: 100%; 28 height: 100%; 29 grid-row: 1; 30 } 31 32 .padding { 33 height: 1px; 34 width: 700px; 35 } 36 37 </style> 38 39 <script> 40 window.addEventListener('load', function() { 41 document.getElementById('scroller1').scrollLeft = 0; 42 document.getElementById('scroller2').scrollLeft = 150; 43 document.getElementById('scroller3').scrollLeft = 300; 44 }); 45 </script> 46 47 <p>You should see three green boxes of varying size below. There should be no red or blue.</p> 48 49 <div id="scroller1" class="scroller"> 50 <div class="grid-container"> 51 <div class="grid-item" style="grid-column: 1;"></div> 52 <div class="green grid-item" style="grid-column: 2;"></div> 53 <div class="green grid-item" style="grid-column: 3;"></div> 54 </div> 55 <div class="padding"></div> 56 </div> 57 58 <div id="scroller2" class="scroller"> 59 <div class="grid-container"> 60 <div class="grid-item" style="grid-column: 1;"></div> 61 <div class="grid-item" style="grid-column: 2;"></div> 62 <div class="green grid-item" style="grid-column: 3;"></div> 63 </div> 64 <div class="padding"></div> 65 </div> 66 67 <div id="scroller3" class="scroller"> 68 <div class="grid-container"> 69 <div class="grid-item" style="grid-column: 1;"></div> 70 <div class="grid-item" style="grid-column: 2;"></div> 71 <div class="grid-item" style="grid-column: 3;"></div> 72 <div class="green grid-item" style="grid-column: 4;"></div> 73 </div> 74 <div class="padding"></div> 75 </div>