scroll-target-align-001-iframe.html (1072B)
1 <!DOCTYPE html> 2 <title>iframe for #target and snap position with snapping off</title> 3 <style type='text/css'> 4 html, body { 5 margin: 0; padding: 0; 6 } 7 html { 8 /* to make failing more obvious */ 9 background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; 10 /* avoid anti-aliasing issues */ 11 font: 20px/1 sans-serif; 12 scrollbar-width: none; 13 } 14 div { 15 height: 1em; 16 } 17 html { scroll-padding: .5em 0 0; } /* set up a snap position */ 18 #target { scroll-margin: .5em 0 0; 19 scroll-snap-align: center; } 20 #stripe { background: green; } /* color part of the snap area */ 21 .fail { color: red; } /* make failing more obvious */ 22 23 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 24 ::-webkit-scrollbar { display: none; } 25 </style> 26 27 <div></div> 28 <div></div> 29 <div></div> 30 <div></div> 31 <div class="fail">FAIL</div> 32 <div></div> 33 <div id="stripe"></div> 34 <div id="target"></div> 35 <div></div> 36 <div class="fail">FAIL</div> 37 <div></div> 38 <div></div> 39 <div></div> 40 <div></div>