positioned-target-iframe.html (1754B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <style> 5 .target { 6 width: 100px; 7 height: 100px; 8 background-color: green; 9 scroll-snap-align: start; 10 } 11 .placeholder { 12 background-color: purple; 13 } 14 .snapcontainer { 15 border:solid 1px black; 16 overflow: scroll; 17 scroll-snap-type: y mandatory; 18 } 19 .big { 20 height: 315px; 21 width: 600px; 22 position: relative; 23 } 24 .small { 25 height: 115px; 26 width: 120px; 27 } 28 .positioned { 29 position: absolute; 30 } 31 #target1, #target2, #target3, #target4, #target5 { 32 top: 400px; 33 } 34 #target1 { 35 left: 0px; 36 } 37 #target2 { 38 left: 110px; 39 } 40 #target3 { 41 left: 220px; 42 } 43 #target4 { 44 left: 330px; 45 } 46 #target5 { 47 left: 440px; 48 } 49 :target { 50 background-color: yellow; 51 } 52 .large-space { 53 position: absolute; 54 height: 300vh; 55 width: 300vw; 56 } 57 </style> 58 <div id="outer" class="big snapcontainer"> 59 <div id="outerplaceholder1" class="placeholder target"></div> 60 <div id="outerplaceholder2" class="placeholder target"></div> 61 <div id="inner" class="small snapcontainer"> 62 <div id="innerplaceholder1" class="placeholder target"></div> 63 <div id="innerplaceholder2" class="placeholder target"></div> 64 <div id="target1" class="positioned target"><h1>Box 1</h1></div> 65 <div id="target2" class="positioned target"><h1>Box 2</h1></div> 66 <div id="target3" class="positioned target"><h1>Box 3</h1></div> 67 <div id="target4" class="positioned target"><h1>Box 4</h1></div> 68 <div id="target5" class="positioned target"><h1>Box 5</h1></div> 69 </div> 70 <div class="large-space"></div> 71 </div> 72 </body> 73 </html>