scroll-target-snap-001-iframe.html (1572B)
1 <!DOCTYPE html> 2 <title>iframe for #target and snap position with snapping on</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 /* turn on snapping */ 15 scroll-snap-type: block; 16 } 17 div { 18 height: 1em; 19 } 20 /* Note: we use "start" for #target to avoid spec ambiguity where 21 * scroll-snap-align conflicts with default ScrollIntoViewOptions. 22 * See https://github.com/w3c/csswg-drafts/issues/9576. 23 */ 24 #target { scroll-margin: 2em 0 0; 25 scroll-snap-align: start; } /* set up a snap position */ 26 #stripe { background: green; } /* color part of the snap area */ 27 .fail { color: red; } /* make failing more obvious */ 28 29 /* Try to foil the UA */ 30 .foilup { margin-bottom: -1em; scroll-snap-align: start; } 31 .foildn { margin-top: -1em; scroll-snap-align: end; } 32 33 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 34 ::-webkit-scrollbar { display: none; } 35 </style> 36 37 <div></div> 38 <div></div> 39 <div></div> 40 <div></div> 41 <div class="foilup"></div> 42 <div class="fail">FAIL</div> 43 <div></div> 44 <div id="stripe"></div> 45 <div class="foilup"></div> 46 <div id="target"></div> 47 <div class="foildn"></div> 48 <div></div> 49 <div class="fail">FAIL</div> 50 <div class="foildn"></div> 51 <div></div> 52 <div class="foildn"></div> 53 <div></div> 54 <div></div> 55 <div></div>