scroll-snap-initial-layout-000-ref.html (1249B)
1 <!DOCTYPE html> 2 <title> 3 CSS Scroll Snap Reference 4 </title> 5 <style> 6 body { 7 position: absolute; 8 bottom: 0; 9 top: 0; 10 left: 0; 11 right: 0; 12 overflow: hidden; 13 } 14 15 .scroller { 16 width: 100px; 17 height: 100px; 18 border: solid blue; 19 margin: 10px; 20 display: inline-block; 21 } 22 23 .scroller > div { 24 width: 30px; 25 height: 30px; 26 background: orange; 27 } 28 29 .proxfar { 30 border-color: orange; 31 } 32 33 </style> 34 35 <p>Test passes if there is an orange square precisely at the top left corner of each blue box (no gap), 36 and each orange box is empty. 37 38 39 <div class="mandatory"> 40 <div class="scroller"> 41 <div></div> 42 </div> 43 44 <div class="scroller"> 45 <div></div> 46 </div> 47 48 <div class="scroller"> 49 <div></div> 50 </div> 51 52 <!-- on-screen --> 53 <div class="scroller"> 54 <div></div> 55 </div> 56 57 <div class="scroller"> 58 <div></div> 59 </div> 60 61 <div class="scroller"> 62 <div></div> 63 </div> 64 </div> 65 66 <div class="proximity"> 67 <!-- off-screen --> 68 <div class="scroller proxfar"> 69 </div> 70 71 <div class="scroller proxfar"> 72 </div> 73 74 <div class="scroller proxfar"> 75 </div> 76 77 <!-- on-screen --> 78 <div class="scroller"> 79 <div></div> 80 </div> 81 82 <div class="scroller"> 83 <div></div> 84 </div> 85 86 <div class="scroller"> 87 <div></div> 88 </div> 89 </div>