scroll-margin-percent.html (1198B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="./resources/intersection-observer-test-utils.js"></script> 7 8 <style> 9 #scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; } 10 #spacer { width: 50px; height: 100px; } 11 #target { width: 50px; height: 50px; background-color: green; } 12 </style> 13 14 <div id=scroller> 15 <div id=spacer></div> 16 <div id=target></div> 17 </div> 18 19 <script> 20 let entries = []; 21 22 window.onload = function() { 23 runTestCycle(testIntersection, "Test scroll margin intersection"); 24 25 const observer = new IntersectionObserver( 26 es => entries = entries.concat(es), 27 { 28 scrollMargin: "10%" 29 } 30 ); 31 observer.observe(target); 32 }; 33 34 function testIntersection() { 35 assert_equals(entries.length, 1, "IntersectionObserverEntryCount"); 36 assert_true(entries[0].isIntersecting, "isIntersecting"); 37 assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio"); 38 } 39 </script>