snap-to-combination-of-two-elements-1.html (1877B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width"> 3 <title> 4 Snap to points of combinations of two different elements 5 </title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/"/> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 div { 11 position: absolute; 12 margin: 0px; 13 } 14 15 #scroller { 16 height: 600px; 17 width: 600px; 18 overflow: hidden; 19 scroll-snap-type: both mandatory; 20 } 21 22 #space { 23 width: 2000px; 24 height: 2000px; 25 } 26 27 #left-top { 28 /* 29 * the scroll position of this `scroll-snap-align: start start` is (200, 200) 30 */ 31 left: 200px; 32 top: 200px; 33 height: 450px; 34 width: 450px; 35 background-color: rgb(255, 0, 0); 36 opacity: 0.5; 37 scroll-snap-align: start start; 38 } 39 40 #right-bottom { 41 /* 42 * the scroll position of this `scroll-snap-align: end end` is (50, 50), 43 * i.e, (`left` - scroll container's `width` + this element's `width, 44 `top` - scroll container's `height` + this element's `height) 45 */ 46 left: 600px; 47 top: 600px; 48 width: 50px; 49 height: 50px; 50 background-color: rgb(0, 255, 0); 51 opacity: 0.5; 52 scroll-snap-align: end end; 53 } 54 55 </style> 56 <div id="scroller"> 57 <div id="space"></div> 58 <div id="left-top"></div> 59 <div id="right-bottom"></div> 60 </div> 61 <script> 62 test(t => { 63 const scroller = document.getElementById("scroller"); 64 assert_equals(scroller.scrollLeft, 50); 65 assert_equals(scroller.scrollTop, 50); 66 67 scroller.scrollTo(100, 150); 68 assert_equals(scroller.scrollLeft, 50); 69 assert_equals(scroller.scrollTop, 200); 70 71 scroller.scrollTo(300, 300); 72 assert_equals(scroller.scrollLeft, 200); 73 assert_equals(scroller.scrollTop, 200); 74 75 scroller.scrollTo(150, 100); 76 assert_equals(scroller.scrollLeft, 200); 77 assert_equals(scroller.scrollTop, 50); 78 }, 'Snap to points of combinations of two different elements'); 79 </script>