layout-follows-focused-targeted-block-iframe.html (1013B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <style> 5 .scroller { 6 width: 200px; 7 height: 200px; 8 border: solid 1px black; 9 overflow: scroll; 10 scroll-snap-type: both mandatory; 11 position: relative; 12 resize: both; 13 } 14 .target { 15 scroll-snap-align: start; 16 width: 50px; 17 height: 50px; 18 background-color: green; 19 position: absolute; 20 } 21 .target:target { 22 background-color: blue; 23 } 24 .target:focus { 25 background-color: yellow; 26 } 27 #box1 { 28 left: 150px; 29 top: 0px; 30 } 31 #box2 { 32 left: 0px; 33 top: 150px; 34 } 35 .space { 36 width: 500%; 37 height: 500%; 38 position: absolute; 39 } 40 </style> 41 <div class="scroller" id="scroller"> 42 <div tabindex="1" id="box1" class="target">Box 1</div> 43 <div tabindex="1" id="box2" class="target">Box 2</div> 44 <div class="space"></div> 45 </div> 46 </body> 47 48 </html>