| <!DOCTYPE html> |
| <html> |
| <body> |
| <style> |
| * { |
| scroll-behavior: smooth; |
| } |
| .scroller { |
| overflow-y: scroll; |
| height: 200px; |
| width: 200px; |
| background-color: teal; |
| border: solid 1px black; |
| position: relative; |
| display: inline-block; |
| } |
| .space { |
| height: 200vh; |
| width: 200vw; |
| } |
| .box { |
| height: 50px; |
| width: 50px; |
| background-color: purple; |
| } |
| .target { |
| position: absolute; |
| top: 150%; |
| } |
| </style> |
| <div id="fragment_scroll_container" class="scroller"> |
| <div class="space"></div> |
| <div class="box target" id="fragment_scroll_target">target</div> |
| </div> |
| <div id="scrollintoview_container" class="scroller"> |
| <div class="space"></div> |
| <div class="box target" id="scrollintoview_target"></div> |
| </div> |
| <a id="fragment_link" href="#fragment_scroll_target">Scroll To Fragment</a> |
| </style> |
| <script> |
| const fragment_scroll_container = |
| document.getElementById("fragment_scroll_container"); |
| const scrollintoview_container = |
| document.getElementById("scrollintoview_container"); |
| const scrollintoview_target = |
| document.getElementById("scrollintoview_target"); |
| const parent = window.parent; |
| |
| // Post a message to the parent frame when the scroll ends to the test can |
| // proceed. |
| scrollintoview_container.addEventListener("scrollend", () => { |
| parent.postMessage("ready"); |
| }, { once: true }); |
| |
| // Start a scroll on the scrollintoview container as soon as we start |
| // scrolling the fragment's container. |
| fragment_scroll_container.addEventListener("scroll", () => { |
| scrollintoview_target.scrollIntoView({ behavior: "smooth" }); |
| }, { once: true }); |
| </script> |
| </body> |
| </html> |
