scroll-target-snap-002.html (2249B)
1 <!DOCTYPE html> 2 <html> 3 <title>scrollIntoView() and snap position with snapping on (y-axis)</title> 4 <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> 5 <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> 6 <link rel='match' href='scroll-target-001-ref.html'> 7 <meta name='assert' 8 content="Test passes if scroll snapping is honored 9 when scrolling an element into view 10 explicitly by script."> 11 12 <style type='text/css'> 13 .container { 14 border: solid blue 4px; 15 height: 4em; 16 overflow: auto; 17 scroll-snap-type: block; 18 19 /* to make failing more obvious */ 20 background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; 21 /* avoid anti-aliasing issues */ 22 font: 20px/1 sans-serif; 23 scrollbar-width: none; 24 } 25 .container > div { 26 height: 1em; 27 } 28 /* Note: we use "start" for #target to avoid spec ambiguity where 29 * scroll-snap-align conflicts with default ScrollIntoViewOptions. 30 * See https://github.com/w3c/csswg-drafts/issues/9576. 31 */ 32 #target { scroll-margin: 2em 0 0; 33 scroll-snap-align: start; } /* set up a snap position */ 34 #stripe { background: green; } /* color part of the snap area */ 35 .fail { color: red; } /* make failing more obvious */ 36 37 /* Try to foil the UA */ 38 .foilup { margin-bottom: -1em; scroll-snap-align: start; } 39 .foildn { margin-top: -1em; scroll-snap-align: end; } 40 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 41 ::-webkit-scrollbar { display: none; } 42 </style> 43 44 <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> 45 46 <div class="container"> 47 <div></div> 48 <div></div> 49 <div></div> 50 <div></div> 51 <div class="foilup"></div> 52 <div class="fail">FAIL</div> 53 <div></div> 54 <div id="stripe"></div> 55 <div class="foilup"></div> 56 <div id="target"></div> 57 <div class="foildn"></div> 58 <div></div> 59 <div class="fail">FAIL</div> 60 <div class="foildn"></div> 61 <div></div> 62 <div class="foildn"></div> 63 <div></div> 64 <div></div> 65 <div></div> 66 </div> 67 68 <script> 69 document.getElementById('target').scrollIntoView(); 70 </script>