scroll-target-padding-002.html (1782B)
1 <!DOCTYPE html> 2 <html> 3 <title>scrollIntoView() and scroll-padding with snapping off (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/#scroll-padding'> 6 <link rel='match' href='scroll-target-001-ref.html'> 7 <meta name='assert' 8 content="Test passes if scroll-padding is honored 9 on a scroll container with 'scroll-snap-type: none' 10 when scrolling an element into view 11 explicitly by script."> 12 <style type='text/css'> 13 .container { 14 border: solid blue 4px; 15 height: 4em; 16 overflow: auto; 17 18 /* to make failing more obvious */ 19 background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; 20 /* avoid anti-aliasing issues */ 21 font: 20px/1 sans-serif; 22 scrollbar-width: none; 23 } 24 .container > div { 25 height: 1em; 26 } 27 .container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */ 28 #stripe { background: green; } /* color part of the snap area */ 29 .fail { color: red; } /* make failing more obvious */ 30 31 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 32 ::-webkit-scrollbar { display: none; } 33 </style> 34 35 <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> 36 37 <div class="container"> 38 <div></div> 39 <div></div> 40 <div></div> 41 <div></div> 42 <div class="fail">FAIL</div> 43 <div></div> 44 <div id="stripe"></div> 45 <div id="target"></div> 46 <div></div> 47 <div class="fail">FAIL</div> 48 <div></div> 49 <div></div> 50 <div></div> 51 <div></div> 52 </div> 53 54 <script> 55 document.getElementById('target').scrollIntoView(); 56 </script>