scroll-target-margin-001-iframe.html (1011B)
1 <!DOCTYPE html> 2 <title>iframe for #target and scroll-margin with snapping off (y</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 #target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */ 18 #stripe { background: green; } /* color part of the snap area */ 19 .fail { color: red; } /* make failing more obvious */ 20 21 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 22 ::-webkit-scrollbar { display: none; } 23 </style> 24 25 <div></div> 26 <div></div> 27 <div></div> 28 <div></div> 29 <div class="fail">FAIL</div> 30 <div></div> 31 <div id="stripe"></div> 32 <div id="target"></div> 33 <div></div> 34 <div class="fail">FAIL</div> 35 <div></div> 36 <div></div> 37 <div></div> 38 <div></div>