scroll-padding.html (1253B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 div { 7 position: absolute; 8 margin: 0px; 9 } 10 #scroller { 11 height: 500px; 12 width: 500px; 13 overflow: hidden; 14 scroll-snap-type: both mandatory; 15 } 16 #target { 17 width: 300px; 18 height: 300px; 19 background-color: blue; 20 } 21 </style> 22 23 <div id="scroller"> 24 <div style="width: 2000px; height: 2000px;"></div> 25 <div id="target"></div> 26 </div> 27 28 <script> 29 test(() => { 30 scroller.style.scrollPadding = "100px"; 31 32 target.style.scrollSnapAlign = "start"; 33 target.style.left = "300px"; 34 target.style.top = "300px"; 35 36 scroller.scrollTo(0, 0); 37 // `target position (300px, 300px)` - `padding (100px, 100px)`. 38 assert_equals(scroller.scrollLeft, 200); 39 assert_equals(scroller.scrollTop, 200); 40 41 target.style.scrollSnapAlign = "end"; 42 43 // `target position (300px, 300px)` + `target size (300px, 300px) + 44 // `padding (100px, 100px) - `scroller size (500px, 500px)`. 45 scroller.scrollTo(0, 0); 46 assert_equals(scroller.scrollLeft, 200); 47 assert_equals(scroller.scrollTop, 200); 48 }, "Snaps to the positions adjusted by scroll-padding"); 49 </script>