capturing-snap-positions.html (1311B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>scroll-snap-type on non-scrollers traps snap positions</title> 4 <link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 10 .scroller { 11 width: 100px; 12 height: 100px; 13 overflow: auto; 14 scroll-snap-type: block mandatory; 15 } 16 .item { 17 background: gray; 18 height: 100px; 19 scroll-snap-type: block mandatory; 20 } 21 .item.snapped { 22 background: green; 23 scroll-snap-align: center; 24 } 25 .subitem { 26 background: red; 27 height: 100px; 28 scroll-snap-align: center; 29 } 30 31 </style> 32 33 34 <!-- 35 Boxes with a non-none value for scroll-snap-type 36 will capture snap positions from their descendents, 37 preventing them from affecting higher-up scrollers, 38 even if they are not, themselves, scrollers. 39 --> 40 41 <div class=scroller> 42 <div class=item></div> 43 <div class=item><div class=subitem></div></div> 44 <div class="item snapped"></div> 45 <div class=item></div> 46 </div> 47 48 <script> 49 50 test(()=>{ 51 const el = document.querySelector('.scroller'); 52 assert_equals(el.scrollTop, 200); 53 }, "The third item should be snapped to by default, not the second's child."); 54 55 </script>