scroll-initial-target-with-text-fragment-navigation-target.html (2103B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 5 <body> 6 <style> 7 :root { 8 margin: 0px; 9 } 10 11 #spacer { 12 height: 100vh; 13 width: 100px; 14 } 15 16 #top_box { 17 width: 100px; 18 height: 60vh; 19 background-color: blue; 20 } 21 #middle_box { 22 width: 100px; 23 height: 60vh; 24 scroll-initial-target: nearest; 25 background-color: purple; 26 } 27 #bottom_box { 28 width: 100px; 29 height: 60vh; 30 background-color: yellow; 31 } 32 33 #fragment_target { 34 width: 100px; 35 height: 100px; 36 background-color: red; 37 } 38 </style> 39 <div id="top_box"></div> 40 <div id="middle_box"></div> 41 <div id="bottom_box"></div> 42 <div id="spacer"></div> 43 <div id="fragment_target">Target</div> 44 <script> 45 function stashResult(key, results) { 46 fetch(`/css/css-scroll-snap/scroll-initial-target/stash.py?key=${key}`, { 47 method: "POST", 48 body: JSON.stringify(results) 49 }).then(() => { 50 window.close(); 51 }); 52 } 53 function record() { 54 let scroll_position = "UNKNOWN"; 55 // Expect page is scrolled all the way down as the text is at the bottom of 56 // the page. 57 const expected_scroll_top = document.scrollingElement.scrollHeight - 58 document.scrollingElement.clientHeight; 59 60 const scroll_start_target_top = Math.round(top_box.getBoundingClientRect().height); 61 62 const actual_scroll_top = Math.round(document.scrollingElement.scrollTop); 63 if (actual_scroll_top == scroll_start_target_top) { 64 scroll_position = "AT_SCROLL_START_TARGET"; 65 } else if (actual_scroll_top == expected_scroll_top) { 66 scroll_position = "AT_TEXT_FRAGMENT"; 67 } 68 69 const result = { 70 scroll_position: scroll_position 71 }; 72 73 let key = (new URL(document.location)).searchParams.get("key"); 74 stashResult(key, result); 75 } 76 77 window.onload = () => { 78 window.requestAnimationFrame(function () { 79 window.requestAnimationFrame(record); 80 }) 81 } 82 </script> 83 </body> 84 85 </html>