smooth-scrollIntoView-with-smooth-fragment-scroll-iframe.html (1895B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <style> 5 * { 6 scroll-behavior: smooth; 7 } 8 .scroller { 9 overflow-y: scroll; 10 height: 200px; 11 width: 200px; 12 background-color: teal; 13 border: solid 1px black; 14 position: relative; 15 display: inline-block; 16 } 17 .space { 18 height: 200vh; 19 width: 200vw; 20 } 21 .box { 22 height: 50px; 23 width: 50px; 24 background-color: purple; 25 } 26 .target { 27 position: absolute; 28 top: 150%; 29 } 30 </style> 31 <div id="fragment_scroll_container" class="scroller"> 32 <div class="space"></div> 33 <div class="box target" id="fragment_scroll_target">target</div> 34 </div> 35 <div id="scrollintoview_container" class="scroller"> 36 <div class="space"></div> 37 <div class="box target" id="scrollintoview_target"></div> 38 </div> 39 <a id="fragment_link" href="#fragment_scroll_target">Scroll To Fragment</a> 40 </style> 41 <script> 42 const fragment_scroll_container = 43 document.getElementById("fragment_scroll_container"); 44 const scrollintoview_container = 45 document.getElementById("scrollintoview_container"); 46 const scrollintoview_target = 47 document.getElementById("scrollintoview_target"); 48 const parent = window.parent; 49 50 // Post a message to the parent frame when the scroll ends to the test can 51 // proceed. 52 scrollintoview_container.addEventListener("scrollend", () => { 53 parent.postMessage("ready"); 54 }, { once: true }); 55 56 // Start a scroll on the scrollintoview container as soon as we start 57 // scrolling the fragment's container. 58 fragment_scroll_container.addEventListener("scroll", () => { 59 scrollintoview_target.scrollIntoView({ behavior: "smooth" }); 60 }, { once: true }); 61 </script> 62 </body> 63 </html>