prefer-targeted-element-iframe.html (1372B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <style> 5 .scroller { 6 overflow: scroll; 7 width: 350px; 8 height: 350px; 9 border: solid 1px black; 10 scroll-snap-type: y mandatory; 11 position: relative; 12 resize: both; 13 } 14 .large-space { 15 height: 300vh; 16 width: 300vw; 17 position: absolute; 18 } 19 .snap { 20 scroll-snap-align: start; 21 } 22 .box { 23 width: 100px; 24 height: 100px; 25 background-color: green; 26 display: inline-block; 27 position: relative; 28 } 29 .grid { 30 position: absolute; 31 width: 350px; 32 height: 350px; 33 } 34 .snap:target { 35 background-color: blue; 36 } 37 </style> 38 <div class="scroller" id="scroller"> 39 <div class="large-space"></div> 40 <div class="grid" id="grid"> 41 <div id="box1" class="snap box">Box 1</div> 42 <div id="box2" class="snap box">Box 2</div> 43 <div id="box3" class="snap box">Box 3</div> 44 <div id="box4" class="snap box">Box 4</div> 45 <div id="box5" class="snap box">Box 5</div> 46 <div id="box6" class="snap box">Box 6</div> 47 <div id="box7" class="snap box">Box 7</div> 48 <div id="box8" class="snap box">Box 8</div> 49 <div id="box9" class="snap box">Box 9</div> 50 </div> 51 </div> 52 </body> 53 </html>